feat(Relays): added logic to manage relays

.eslintrc.cjs

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

.git-hooks/commit-msg

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

.git-hooks/pre-commit

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

.gitea/workflows/release-staging.yaml

@@ -1,46 +0,0 @@
-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/release.yaml

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

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

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

LICENSE

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

README.md

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

index.html

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

licenseChecker.cjs

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

package.json

@@ -1,92 +1,61 @@
 {
-  "name": "sigit",
+  "name": "web",
   "private": true,
-  "version": "0.0.0-beta",
+  "version": "0.0.0",
   "type": "module",
   "homepage": "https://sigit.io/",
-  "license": "AGPL-3.0-or-later ",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
     "formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
-    "formatter:staged": "prettier --write --ignore-unknown",
-    "preview": "vite preview",
-    "preinstall": "git config core.hooksPath .git-hooks",
-    "license-checker": "node licenseChecker.cjs",
-    "lint-staged": "lint-staged"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",
     "@noble/hashes": "^1.4.0",
     "@nostr-dev-kit/ndk": "2.5.0",
-    "@pdf-lib/fontkit": "^1.1.1",
     "@reduxjs/toolkit": "2.2.1",
-    "axios": "^1.7.4",
+    "axios": "1.6.7",
     "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-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",
+    "nostr-tools": "2.3.1",
     "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-multi-backend": "^8.0.3",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
     "react-redux": "9.1.0",
     "react-router-dom": "6.22.1",
-    "react-singleton-hook": "^4.0.1",
     "react-toastify": "10.0.4",
     "redux": "5.0.1",
-    "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-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"
+    "vite": "^5.1.4"
   }
 }

public/.well-known/nostr.json

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

public/logo.svg

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

src/App.css

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

src/App.scss

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

src/App.tsx

@@ -1,32 +1,38 @@
 import { useEffect } from 'react'
-import { useAppSelector } from './hooks/store'
+import { useSelector } from 'react-redux'
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { AuthController } from './controllers'
+import { AuthController, NostrController } from './controllers'
 import { MainLayout } from './layouts/Main'
 import {
   appPrivateRoutes,
   appPublicRoutes,
   privateRoutes,
-  publicRoutes,
-  recursiveRouteRenderer
+  publicRoutes
 } from './routes'
-import './App.scss'
+import { State } from './store/rootReducer'
+import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
 
 const App = () => {
-  const authState = useAppSelector((state) => state.auth)
+  const authState = useSelector((state: State) => state.auth)
 
   useEffect(() => {
-    if (window.location.hostname === '0.0.0.0') {
-      // A change of the host is needed to make  library available in windows object
-      // the app can't encrypt files without the crypto library
-      // which is only available on https or localhost
-      window.location.hostname = 'localhost'
-    }
+    generateBunkerDelegatedKey()
 
     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(
@@ -35,18 +41,39 @@ 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 && privateRouteList}
-        {publicRoutesList}
+        {authState?.loggedIn &&
+          privateRoutes.map((route, index) => (
+            <Route
+              key={route.path + index}
+              path={route.path}
+              element={route.element}
+            />
+          ))}
+        {publicRoutes.map((route, index) => {
+          if (authState?.loggedIn) {
+            if (!route.hiddenWhenLoggedIn) {
+              return (
+                <Route
+                  key={route.path + index}
+                  path={route.path}
+                  element={route.element}
+                />
+              )
+            }
+          } else {
+            return (
+              <Route
+                key={route.path + index}
+                path={route.path}
+                element={route.element}
+              />
+            )
+          }
+        })}
+
         <Route path="*" element={<Navigate to={handleRootRedirect()} />} />
       </Route>
     </Routes>

src/assets/images/bg_l.svg

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

src/assets/images/bg_r.svg

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

src/colors.scss

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

src/components/AppBar/AppBar.tsx

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

src/components/AppBar/style.module.scss

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

src/components/ButtonIcon/index.tsx

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

src/components/ButtonIcon/style.module.scss

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

src/components/Container/index.tsx

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

src/components/Container/style.module.scss

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

src/components/DisplaySigit/index.tsx

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

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

src/components/DisplaySigner/index.tsx

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

src/components/DisplaySigner/style.module.scss

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

src/components/DrawPDFFields/index.tsx

@@ -1,673 +0,0 @@
-import { Close } from '@mui/icons-material'
-import {
-  FormControl,
-  InputLabel,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  Select
-} from '@mui/material'
-import styles from './style.module.scss'
-import React, { 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

@@ -1,101 +0,0 @@
-@import '../../styles/sizes.scss';
-
-.pdfFieldItem {
-  background: white;
-  padding: 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.pdfImageWrapper {
-  &.drawing {
-    cursor: crosshair;
-  }
-}
-
-.pdfImageWrapper:focus {
-  outline: none;
-}
-
-.placeholder {
-  position: absolute;
-  opacity: 0.5;
-  inset: 0;
-}
-
-.drawingRectangle {
-  position: absolute;
-  outline: 1px solid #01aaad;
-  z-index: 40;
-  background-color: #01aaad4b;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &.nonEditable {
-    cursor: default;
-    visibility: hidden;
-  }
-
-  &.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

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

src/components/FileDivider.tsx

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

src/components/FileList/index.tsx

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

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

src/components/FontAwesomeIconStack/index.tsx

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

src/components/FontAwesomeIconStack/styles.module.scss

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

src/components/Footer/Footer.tsx

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

src/components/Footer/style.module.scss

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

src/components/Landing/CardComponent/CardComponent.tsx

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

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

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

src/components/LoadingSpinner/index.tsx

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

src/components/LoadingSpinner/style.module.scss

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

src/components/MarkFormField/index.tsx

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

@@ -1,218 +0,0 @@
-@import '../../styles/sizes.scss';
-
-.container {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-
-  @media only screen and (min-width: 768px) {
-    bottom: 0;
-    right: 0;
-    left: 0;
-  }
-  bottom: $tabs-height + 5px;
-  right: 5px;
-  left: 5px;
-
-  align-items: center;
-  z-index: 40;
-
-  button {
-    transition: ease 0.2s;
-    width: auto;
-    border-radius: 4px;
-    outline: unset;
-    border: unset;
-    background: unset;
-    color: #ffffff;
-    background: #4c82a3;
-    font-weight: 500;
-    font-size: 14px;
-    padding: 8px 15px;
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    grid-gap: 12px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: unset;
-    position: relative;
-    cursor: pointer;
-  }
-
-  button:hover {
-    background: #5e8eab;
-    color: white;
-  }
-
-  button:active {
-    background: #447592;
-    color: white;
-  }
-
-  .actionButtons {
-    display: flex;
-    flex-direction: row;
-    grid-gap: 5px;
-  }
-
-  .actionsBottom {
-    display: flex;
-    flex-direction: row;
-    grid-gap: 5px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .submitButton {
-    width: 100%;
-    max-width: 300px;
-    margin-top: 10px;
-  }
-
-  .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

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

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

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

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

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

src/components/PDFView/PdfMarkItem.tsx

@@ -1,61 +0,0 @@
-import { CurrentUserMark } from '../../types/mark.ts'
-import styles from '../DrawPDFFields/style.module.scss'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
-import { useScale } from '../../hooks/useScale.tsx'
-import { forwardRef } from 'react'
-import { npubToHex } from '../../utils/nostr.ts'
-import { 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

@@ -1,170 +0,0 @@
-import PdfView from './index.tsx'
-import MarkFormField from '../MarkFormField'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import React, { useState, useEffect } from 'react'
-import {
-  findNextIncompleteCurrentUserMark,
-  getUpdatedMark,
-  updateCurrentUserMarks
-} from '../../utils'
-import { EMPTY } from '../../utils/const.ts'
-import { Container } from '../Container'
-import signPageStyles from '../../pages/sign/style.module.scss'
-import { CurrentUserFile } from '../../types/file.ts'
-import FileList from '../FileList'
-import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
-import { UsersDetails } from '../UsersDetails.tsx'
-import { Meta } from '../../types'
-import {
-  faCircleInfo,
-  faFileDownload,
-  faPen
-} from '@fortawesome/free-solid-svg-icons'
-
-interface PdfMarkingProps {
-  currentUserMarks: CurrentUserMark[]
-  files: CurrentUserFile[]
-  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

@@ -1,84 +0,0 @@
-import styles from '../DrawPDFFields/style.module.scss'
-import { PdfPage } from '../../types/drawing.ts'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import PdfMarkItem from './PdfMarkItem.tsx'
-import { useEffect, useRef } from 'react'
-import pdfViewStyles from './style.module.scss'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
-import { useScale } from '../../hooks/useScale.tsx'
-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

@@ -1,84 +0,0 @@
-import PdfItem from './PdfItem.tsx'
-import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import { CurrentUserFile } from '../../types/file.ts'
-import { useEffect, useRef } from 'react'
-import { FileDivider } from '../FileDivider.tsx'
-import React from 'react'
-import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
-
-interface PdfViewProps {
-  currentFile: CurrentUserFile | null
-  currentUserMarks: CurrentUserMark[]
-  files: CurrentUserFile[]
-  handleMarkClick: (id: number) => void
-  otherUserMarks: Mark[]
-  selectedMark: CurrentUserMark | null
-  selectedMarkValue: string
-}
-
-/**
- * Responsible for rendering Pdf files.
- */
-const PdfView = ({
-  files,
-  currentUserMarks,
-  handleMarkClick,
-  selectedMarkValue,
-  selectedMark,
-  currentFile,
-  otherUserMarks
-}: PdfViewProps) => {
-  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
-  useEffect(() => {
-    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
-      pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
-    }
-  }, [currentFile])
-  const filterByFile = (
-    currentUserMarks: CurrentUserMark[],
-    hash: string
-  ): CurrentUserMark[] => {
-    return currentUserMarks.filter(
-      (currentUserMark) => currentUserMark.mark.pdfFileHash === 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

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

src/components/Select/index.tsx

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

src/components/Spinner/index.tsx

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

src/components/Spinner/style.module.scss

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

src/components/TooltipChild.tsx

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

src/components/UserAvatar/index.tsx

@@ -1,58 +0,0 @@
-import { getProfileRoute } from '../../routes'
-
-import styles from './styles.module.scss'
-import { AvatarIconButton } from '../UserAvatarIconButton'
-import { Link } from 'react-router-dom'
-import { useProfileMetadata } from '../../hooks/useProfileMetadata'
-import { Tooltip } from '@mui/material'
-import { getProfileUsername } from '../../utils'
-import { TooltipChild } from '../TooltipChild'
-
-interface UserAvatarProps {
-  pubkey: string
-  isNameVisible?: boolean
-}
-
-/**
- *  This component will be used for the displaying username and profile picture.
- *  Clicking will navigate to the user's profile.
- */
-export const UserAvatar = ({
-  pubkey,
-  isNameVisible = false
-}: UserAvatarProps) => {
-  const profile = useProfileMetadata(pubkey)
-  const name = getProfileUsername(pubkey, profile)
-  const image = profile?.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

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

src/components/UserAvatarGroup/index.tsx

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

src/components/UserAvatarGroup/style.module.scss

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

src/components/UserAvatarIconButton/index.tsx

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

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

src/components/UsersDetails.tsx/index.tsx

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

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

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

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

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

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

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

src/components/username.tsx

@@ -1,8 +1,9 @@
-import { Typography } from '@mui/material'
-import { useAppSelector } from '../hooks/store'
-
-import styles from './username.module.scss'
-import { AvatarIconButton } from './UserAvatarIconButton'
+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'
 
 type Props = {
   username: string
@@ -10,36 +11,83 @@ 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 = useAppSelector((state) => state.auth.usersPubkey)
+  const hexKey = useSelector((state: State) => state.auth.usersPubkey)
 
   return (
-    <div className={styles.container}>
+    <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)}`
+        }}
+      />
       <Typography
         variant="h6"
         sx={{
-          fontWeight: 500,
-          fontSize: '14px',
-          color: 'var(--text-color)',
+          color: '#3e3e3e',
+          padding: '0 8px',
           display: { xs: 'none', md: 'flex' }
         }}
       >
         {username}
       </Typography>
-      <AvatarIconButton
-        src={avatarContent}
-        hexKey={hexKey}
-        aria-label="account of current user"
-        aria-controls="menu-appbar"
-        aria-haspopup="true"
-        onClick={handleClick}
-      />
-    </div>
+    </IconButton>
   )
 }
 
 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

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

src/controllers/AuthController.ts

@@ -1,23 +1,21 @@
 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,
-  unixNow
+  compareObjects
 } from '../utils'
+import { appPrivateRoutes } from '../routes'
+import { SignedEvent } from '../types'
 
 export class AuthController {
   private nostrController: NostrController
@@ -25,13 +23,13 @@ export class AuthController {
 
   constructor() {
     this.nostrController = NostrController.getInstance()
-    this.metadataController = MetadataController.getInstance()
+    this.metadataController = new MetadataController()
   }
 
   /**
    * Function will authenticate user by signing an auth event
    * which is done by calling the sign() function, where appropriate
-   * method will be chosen (extension or keys)
+   * method will be chosen (extension, nsecbunker or keys)
    *
    * @param pubkey of the user trying to login
    * @returns url to redirect if authentication successfull
@@ -56,16 +54,13 @@ export class AuthController {
       })
 
     // Nostr uses unix timestamps
-    const timestamp = unixNow()
-    const { href } = window.location
+    const timestamp = Math.floor(Date.now() / 1000)
+    const { hostname } = window.location
 
     const authEvent: EventTemplate = {
-      kind: 27235,
-      tags: [
-        ['u', href],
-        ['method', 'GET']
-      ],
-      content: '',
+      kind: 1,
+      tags: [],
+      content: `${hostname}-${timestamp}`,
       created_at: timestamp
     }
 
@@ -79,32 +74,36 @@ export class AuthController {
       })
     )
 
-    const relayMap = await getRelayMap(pubkey)
+    const relaysState = store.getState().relays
 
-    if (Object.keys(relayMap).length < 1) {
-      // Navigate user to relays page if relay map is empty
-      return Promise.resolve(appPrivateRoutes.relays)
-    }
+    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 (store.getState().auth.loggedIn) {
-      if (!compareObjects(store.getState().relays?.map, relayMap.map))
-        store.dispatch(setRelayMapAction(relayMap.map))
-    }
-
-    const currentLocation = window.location.hash.replace('#', '')
-
-    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)
+      if (Object.keys(relayMap).length < 1) {
+        // Navigate user to relays page
+        return Promise.resolve(appPrivateRoutes.relays)
       }
+
+      store.dispatch(setRelayMapAction(relayMap.map))
+    }
+
+    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,165 +1,146 @@
 import {
-  Event,
   Filter,
+  SimplePool,
   VerifiedEvent,
   kinds,
   validateEvent,
-  verifyEvent
+  verifyEvent,
+  Event,
+  EventTemplate,
+  nip19
 } from 'nostr-tools'
+import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types'
+import { NostrController } from '.'
 import { toast } from 'react-toastify'
-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'
+import { queryNip05 } from '../utils'
+import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk'
 
-export class MetadataController extends EventEmitter {
-  private static instance: MetadataController
+export class 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 static getInstance(): MetadataController {
-    if (!MetadataController.instance) {
-      MetadataController.instance = new MetadataController()
+  public getEmptyMetadataEvent = (): Event => {
+    return {
+      content: '',
+      created_at: new Date().valueOf(),
+      id: '',
+      kind: 0,
+      pubkey: '',
+      sig: '',
+      tags: []
     }
-    return MetadataController.instance
   }
 
-  /**
-   * 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
+  public findMetadata = async (hexKey: string) => {
     const eventFilter: Filter = {
       kinds: [kinds.Metadata],
       authors: [hexKey]
     }
 
-    const fetchPromise = relayController
-      .fetchEvent(eventFilter, DEFAULT_LOOK_UP_RELAY_LIST)
+    const pool = new SimplePool()
+
+    const metadataEvent = await pool
+      .get([this.specialMetadataRelay], eventFilter)
       .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
     }
 
-    // todo/implement: if no valid metadata event is found in DEFAULT_LOOK_UP_RELAY_LIST
-    // try to query user relay list
+    const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
+    const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
+    const relays = [...hardcodedPopularRelays]
 
-    // 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)
+    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
+        }
+      }
     }
 
-    return currentEvent
+    throw new Error('Mo 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 findRelayListMetadata = async (hexKey: string) => {
+    const eventFilter: Filter = {
+      kinds: [kinds.RelayList],
+      authors: [hexKey]
+    }
 
-  /**
-   * 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)
+    const pool = new SimplePool()
 
-    // 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)
+    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: []
       }
 
-      // Return the cached metadata event
-      return cachedMetadataEvent.event
+      // 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
     }
 
-    // If no cached metadata is found, retrieve it from relays
-    return this.checkForMoreRecentMetadata(hexKey, null)
+    throw new Error('No relay list metadata found.')
   }
 
-  /**
-   * 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) => {
+  public extractProfileMetadataContent = (event: VerifiedEvent) => {
     try {
       if (!event.content) return {}
       return JSON.parse(event.content) as ProfileMetadata
@@ -176,7 +157,7 @@ export class MetadataController extends EventEmitter {
     let signedMetadataEvent = event
 
     if (event.sig.length < 1) {
-      const timestamp = unixNow()
+      const timestamp = Math.floor(Date.now() / 1000)
 
       // Metadata event to publish to the wss://purplepag.es relay
       const newMetadataEvent: Event = {
@@ -188,32 +169,139 @@ export class MetadataController extends EventEmitter {
         await this.nostrController.signEvent(newMetadataEvent)
     }
 
-    await relayController
-      .publish(signedMetadataEvent, [this.specialMetadataRelay])
+    await this.nostrController
+      .publishEvent(signedMetadataEvent, [this.specialMetadataRelay])
       .then((relays) => {
-        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!')
-        }
+        toast.success(`Metadata event published on: ${relays.join('\n')}`)
       })
       .catch((err) => {
         toast.error(err.message)
       })
   }
 
-  public validate = (event: Event) => validateEvent(event) && verifyEvent(event)
+  public getNostrJoiningBlockNumber = async (
+    hexKey: string
+  ): Promise<NostrJoiningBlock | null> => {
+    const relaySet = await this.findRelayListMetadata(hexKey)
 
-  public getEmptyMetadataEvent = (pubkey?: string): Event => {
-    return {
-      content: '',
-      created_at: new Date().valueOf(),
-      id: '',
-      kind: 0,
-      pubkey: pubkey || '',
-      sig: '',
-      tags: []
+    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)
 }

src/controllers/NostrController.ts

@@ -1,24 +1,195 @@
-import { EventTemplate, UnsignedEvent } from 'nostr-tools'
-import { WindowNostr } from 'nostr-tools/nip07'
+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 { EventEmitter } from 'tseep'
+import { updateNsecbunkerPubkey } from '../store/actions'
+import { AuthState, LoginMethods } from '../store/auth/types'
 import store from '../store/store'
-import { SignedEvent } from '../types'
-import { LoginMethodContext } from '../services/LoginMethodStrategy/loginMethodContext'
+import { SignedEvent, RelayMap } from '../types'
+import { getNsecBunkerDelegatedKey, verifySignedEvent } from '../utils'
 
 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 as WindowNostr
+    if (window.nostr) return window.nostr
 
     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()
@@ -27,73 +198,163 @@ export class NostrController extends EventEmitter {
   }
 
   /**
-   * 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.
+   * Function will publish provided event to the provided relays
    */
-  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)
+  publishEvent = async (event: Event, relays: string[]) => {
+    const simplePool = new SimplePool()
 
-    // Handle encryption when the login method is via an extension.
-    return await context.nip44Encrypt(receiver, content)
-  }
+    const promises = simplePool.publish(relays, event)
 
-  /**
-   * 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 results = await Promise.allSettled(promises)
 
-    // Handle decryption
-    return await context.nip44Decrypt(sender, content)
+    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
   }
 
   /**
    * Signs an event with private key (if it is present in local storage) or
-   * with browser extension (if it is present)
+   * with browser extension (if it is present) or
+   * with nSecBunker instance.
    * @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.loginMethod
-    const context = new LoginMethodContext(loginMethod)
+    const loginMethod = (store.getState().auth as AuthState).loginMethod
 
-    return await context.signEvent(event)
+    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`
+      )
+    }
   }
 
-  nip04Encrypt = async (receiver: string, content: string): Promise<string> => {
-    const loginMethod = store.getState().auth.loginMethod
-    const context = new LoginMethodContext(loginMethod)
+  nip04Encrypt = async (receiver: string, content: string) => {
+    const loginMethod = (store.getState().auth as AuthState).loginMethod
 
-    return await context.nip04Encrypt(receiver, content)
-  }
+    if (loginMethod === LoginMethods.extension) {
+      const nostr = this.getNostrObject()
 
-  /**
-   * 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)
+      if (!nostr.nip04) {
+        throw new Error(
+          `Your nostr extension does not support nip04 encryption & decryption`
+        )
+      }
 
-    return await context.nip04Decrypt(sender, content)
+      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')
   }
 
   /**
@@ -102,12 +363,8 @@ export class NostrController extends EventEmitter {
    */
   capturePublicKey = async (): Promise<string> => {
     const nostr = this.getNostrObject()
-    const pubKey = await nostr.getPublicKey().catch((err: unknown) => {
-      if (err instanceof Error) {
-        return Promise.reject(err.message)
-      } else {
-        return Promise.reject(JSON.stringify(err))
-      }
+    const pubKey = await nostr.getPublicKey().catch((err: any) => {
+      return Promise.reject(err.message)
     })
 
     if (!pubKey) {
@@ -116,4 +373,116 @@ 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

@@ -1,306 +0,0 @@
-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()