Compare commits
573 Commits
relay-mana
...
staging
Author | SHA1 | Date | |
---|---|---|---|
4cb6f07a68 | |||
|
5b1654c341 | ||
|
02f651acc7 | ||
|
cd0e4523e1 | ||
|
76b1fa792c | ||
|
3a94fbc0ae | ||
|
e37f90d6db | ||
cc059f6cb4 | |||
|
de44370a96 | ||
|
dfa2832e8d | ||
|
9286e4304f | ||
aae11589a4 | |||
69f67fc812 | |||
38cd88fd86 | |||
dbcd54cec0 | |||
2d0212fd6c | |||
19b815e528 | |||
33e7fc7771 | |||
97d9857bef | |||
|
4465b8c3ac | ||
54047740f9 | |||
7f411f09a7 | |||
849e47da00 | |||
bb323be87c | |||
fd2f179273 | |||
4559f16d86 | |||
d6f92accb0 | |||
ee03cc545e | |||
70e525357c | |||
3eed2964a0 | |||
3a0f155010 | |||
1d1986f082 | |||
25764c7ab4 | |||
cc382f0726 | |||
9dd190d65b | |||
c3dacbe111 | |||
897daaa1fa | |||
ed90168e5d | |||
7f5fd4534f | |||
7f172178a1 | |||
1116867224 | |||
db9cf9d20c | |||
58c457b62c | |||
b6846c0006 | |||
8deb5bd7cd | |||
7b7f23a779 | |||
db4a202363 | |||
3a507246ca | |||
f09d9b2378 | |||
fe9f282984 | |||
aa4637dd0d | |||
23a04faad8 | |||
ad2ec070be | |||
d610c79cad | |||
b7bd922af3 | |||
f12aaf1c2b | |||
6c5ed3a69c | |||
862012e405 | |||
8689c7f753 | |||
a3c45b504e | |||
da30dba368 | |||
|
51e2ab6f8a | ||
|
9091bbc251 | ||
331759de5c | |||
995c7ce293 | |||
3d5006a715 | |||
f38344b9ac | |||
2b630c94b6 | |||
edeb22fb37 | |||
a2138f1de1 | |||
85bf907f54 | |||
3b447dcf6a | |||
532cdaed8e | |||
67d545de2f | |||
637e26bf35 | |||
110621a125 | |||
59e153595a | |||
0b79ebd909 | |||
e2dbed2b03 | |||
7c26edf84e | |||
2d7bb234f4 | |||
c4d50293ff | |||
89971fb176 | |||
acad24dc06 | |||
|
55abe814c9 | ||
21aa25a42a | |||
e33996c1f9 | |||
edbe708b65 | |||
7056ad3cd3 | |||
7dffe75bd7 | |||
8da2510a18 | |||
b92790ceed | |||
7f00f9e8bf | |||
07f1a15aa1 | |||
85bcfac2e0 | |||
edfe9a2954 | |||
633c23e459 | |||
2e1d48168a | |||
e05d3e53a2 | |||
d8d51be603 | |||
5f92906032 | |||
70cca9dd10 | |||
9bae5b9ba2 | |||
9432e99b3b | |||
ff875cc9d7 | |||
a1bf88d243 | |||
67c3c74515 | |||
f81f2b0523 | |||
182ef40d8d | |||
39934f59c3 | |||
d45ea63c20 | |||
dd97dfbaf0 | |||
aec0d0bdd8 | |||
5f39b55f68 | |||
ebd59471c7 | |||
c2a149c872 | |||
0091d3ec9e | |||
dd53ded518 | |||
6d78d9ed64 | |||
dfdcb8419d | |||
f8a4480994 | |||
c52fecdf4e | |||
43beac48e8 | |||
f35e2718ab | |||
6ba3b6ec89 | |||
84c374bb2c | |||
a53914b59d | |||
68c10d1831 | |||
5a2a0ad9c4 | |||
62c1f1b37b | |||
8267eb624b | |||
e1c750495e | |||
8b00ef538b | |||
13254fbe06 | |||
1dfab7b82b | |||
759a40a4f9 | |||
8b4f1a8973 | |||
79ef9eb8d6 | |||
aa8214d015 | |||
ba24e7417d | |||
ea7e3a0964 | |||
675a763af3 | |||
bf1b3beb63 | |||
2e58b58a6a | |||
17c1700554 | |||
9191336722 | |||
32a6f9d7a3 | |||
5f0234a358 | |||
235e76be4e | |||
e48a396990 | |||
7c80643aba | |||
9c545a477c | |||
4d1e672268 | |||
79e14d45a1 | |||
64e8ebba85 | |||
4bc5882ab6 | |||
5dc8d53503 | |||
86a16c13ce | |||
7c027825cd | |||
8e71592d88 | |||
75a715d002 | |||
e2b3dc13fb | |||
0244090c6a | |||
f0ba9da8af | |||
1d1c675dd7 | |||
70f646444b | |||
09229f42c7 | |||
f516fe82d7 | |||
bf506705e6 | |||
b8811d730a | |||
479cca2180 | |||
82b7b9f7ce | |||
3e075754e5 | |||
c6010a5bef | |||
81f40c345a | |||
734026b2ee | |||
5caa7f2282 | |||
fa7f0e2fc0 | |||
7d0d4fcb48 | |||
9223857e18 | |||
2be7f3d51b | |||
36281376bc | |||
a3effd878b | |||
b20ffe6e87 | |||
757012399a | |||
c2d065a8a5 | |||
d1b9eb55d8 | |||
e5f8b797bb | |||
d627db5ac0 | |||
6abdb0ae2b | |||
be9bfc28c8 | |||
2e9e9b0a06 | |||
15aaef948d | |||
bee566424d | |||
f8533b0ffd | |||
6f7d4c9dcf | |||
d9be05165f | |||
2367eb1887 | |||
156bc59e1a | |||
a48751b9a8 | |||
b3564389f9 | |||
5c8cbc1956 | |||
791c213e3a | |||
e2b12afc72 | |||
20d1170f7d | |||
a8020e6db2 | |||
1c998ab99f | |||
fa1811a330 | |||
624afae851 | |||
3a03e3c7e8 | |||
5570d72f79 | |||
59c3fc69a2 | |||
9dc160e89c | |||
a442e71087 | |||
923a47b4d0 | |||
4712031615 | |||
ec305c417b | |||
722aecda39 | |||
8c5be3713d | |||
f4aefbb200 | |||
ea09daa669 | |||
ecc1707212 | |||
ac3186a02e | |||
31f36750cd | |||
2f54184625 | |||
acc8c84617 | |||
ae08b07d74 | |||
05a2dba164 | |||
c9d7d0a6f5 | |||
86095cba5c | |||
0b9c9906b7 | |||
|
070b02abee | ||
|
49c1714962 | ||
|
73a5d42fcf | ||
|
18270c5d8a | ||
20496c7e3e | |||
eb08760f87 | |||
15d4d0a752 | |||
7b33e37ca5 | |||
329fd3d27b | |||
58f70db7f6 | |||
8c974768a8 | |||
e7b0bbe23c | |||
3c230e6fb4 | |||
35f6a639e6 | |||
|
d7b5ea9b9e | ||
c1b1c5a075 | |||
|
4a553c047c | ||
7bb83695c9 | |||
603b01d400 | |||
2d82521641 | |||
|
42d74c656a | ||
|
2c18c51029 | ||
|
f9fcfb1c9e | ||
07d25ebbd2 | |||
23a7dc4269 | |||
4d4a5b63cf | |||
c3a39157ff | |||
4d794e1e53 | |||
404f4aa3a1 | |||
15e01f530f | |||
61f39d17ff | |||
bec3c92b03 | |||
ba7d3fadbd | |||
0f8a40e9f0 | |||
3d3b8ba6e1 | |||
b6e739bc14 | |||
17c91b5507 | |||
e0d6c03639 | |||
f162baadbb | |||
3a6c5ae8e3 | |||
55bf90e93c | |||
b12ce258eb | |||
6f88f22933 | |||
0d1a7ba171 | |||
19f7151db7 | |||
05b9248375 | |||
1caeb48e6c | |||
48f54d8568 | |||
29e6c85150 | |||
c2199b79bd | |||
6641cf2ee7 | |||
4cf578b514 | |||
86c8cc00fd | |||
18637bbbc1 | |||
eca31cea4f | |||
b6479db266 | |||
b2c3cf2aca | |||
423b6b6792 | |||
268a4db3ff | |||
7278485b76 | |||
78060fa15f | |||
f88e2ad680 | |||
2c586f3c13 | |||
|
a788309126 | ||
|
c274879adc | ||
|
3ae1a74dcd | ||
|
2f1423a35a | ||
79f37a842f | |||
|
12765cf758 | ||
|
66c7182fa4 | ||
|
03cb6b1732 | ||
|
c40651631f | ||
|
a775d7b265 | ||
ed7acd6cb4 | |||
b22f577cc2 | |||
2becab9f79 | |||
7d3daa8d13 | |||
bff590f532 | |||
2f29ea9f35 | |||
d41d577c29 | |||
1c3d3ca88f | |||
d8adb2c744 | |||
3743a30ef6 | |||
4b04bdf39e | |||
01ca81be2a | |||
64dbd7d479 | |||
50c8f2b2d0 | |||
dfe67b99ad | |||
97c82718cb | |||
5ffedb68d6 | |||
b8ba8d0ab4 | |||
b3155cce0d | |||
e16b8cfe3f | |||
bc23361fb0 | |||
d9779c10bd | |||
115a3974e2 | |||
6652c6519e | |||
6d881ccb45 | |||
950593aeed | |||
f896849ffd | |||
3549b6e542 | |||
4c04c12403 | |||
0d52cd7113 | |||
ed0158e817 | |||
72d0e065ea | |||
15aa98e9db | |||
93b2477839 | |||
83ddc1bbc8 | |||
276ad23e2c | |||
c18d0f6c13 | |||
4aeb5e9eab | |||
691f060ca0 | |||
748cb16f9f | |||
5015cefe98 | |||
7b5a12246d | |||
738a6b87f5 | |||
88d988e60b | |||
50b406d83a | |||
d5e0769692 | |||
b0ba2b9b4d | |||
f80d4d7b67 | |||
f49a9e0b40 | |||
2acb353535 | |||
3f5451b265 | |||
8d683de88c | |||
7e420ef583 | |||
ff1e127888 | |||
c1a6ac246b | |||
1297acc7db | |||
e3eb1f37c1 | |||
57aba9dd42 | |||
312ec38817 | |||
dde019d364 | |||
d43067f70e | |||
84d13793ff | |||
5290dda52a | |||
4af578133c | |||
9ca75c7a52 | |||
7a0e1c9052 | |||
ea7fde4b38 | |||
70f625ffd1 | |||
2355da02d2 | |||
52fe523196 | |||
becd02153c | |||
272fcf93c6 | |||
6b5a8a7375 | |||
070193c8df | |||
b3fc3c6715 | |||
1de8e89beb | |||
d0e3704ed6 | |||
e4a7fa4892 | |||
c3f60b1e64 | |||
6f05295cd0 | |||
21caaa7009 | |||
64c48835a4 | |||
7dafcf65c9 | |||
e681513785 | |||
551a3f8509 | |||
12fe476e97 | |||
c81a0a52ce | |||
4690cc0115 | |||
c5e234d792 | |||
b44f7fb5e3 | |||
c9c874ae98 | |||
fff22dce8c | |||
47d41a6632 | |||
87ef61a28e | |||
e1808726aa | |||
a1cb6c6caf | |||
0ba3ae14a4 | |||
651d576eea | |||
cb9a443fb1 | |||
4a932ffe03 | |||
296b135c06 | |||
b58ba625f9 | |||
bf167d78f2 | |||
54a60d4a5a | |||
97aa87d8b1 | |||
94c1d457f7 | |||
f51afe3b67 | |||
8d168314de | |||
64b6f8309f | |||
b959aa7dc2 | |||
f21d158a8e | |||
e280e87342 | |||
c29bdd59ae | |||
0a74ad97b2 | |||
21bfda19f9 | |||
a63ea913d9 | |||
c22b1e4b5a | |||
3470bf78b7 | |||
5445120511 | |||
6f4737d75c | |||
20bb05ddc6 | |||
5d415a2359 | |||
1070c9a8f9 | |||
fcd00d9e9c | |||
dc11f5695d | |||
d7f9807e20 | |||
5a4da1834b | |||
202c98c94c | |||
e9a1b9894c | |||
f1a26e4dc4 | |||
aa5aa60c6a | |||
3a93622966 | |||
c5b1a9b380 | |||
53b7b05ac5 | |||
baa1a7b040 | |||
0d49c49459 | |||
99856fd8f2 | |||
d0a6297cce | |||
9dae3a48be | |||
e3ca3ab908 | |||
c7dfb2864a | |||
55158fc313 | |||
28184ab038 | |||
af689a00f7 | |||
5d59ffce28 | |||
9189ff33bc | |||
e54eced800 | |||
2cd851a7c1 | |||
6a1f04ec6b | |||
b5de0ce04a | |||
804bb6c9ac | |||
3c22429941 | |||
868ae6f23e | |||
87c6807ba0 | |||
4556bd0c66 | |||
06deecba76 | |||
0b35f11abf | |||
017d1ab88b | |||
8fa074899c | |||
45f0764fa8 | |||
5b9093a6e7 | |||
87e4536713 | |||
3149ba9757 | |||
a82f138057 | |||
0a61ae5f64 | |||
3ae7d09fa4 | |||
131b15fc8c | |||
91dae29ea5 | |||
8576034829 | |||
b9449c63e0 | |||
42d2777579 | |||
70262bd5d2 | |||
|
d5c45902b8 | ||
|
7df6ab8c84 | ||
|
0aaa20092e | ||
|
8eaf9cb61c | ||
|
6b135ac54d | ||
|
6553ed89e0 | ||
|
8167c5d05f | ||
|
fa7a6e85f4 | ||
|
ef5376e2d1 | ||
|
016ccea74f | ||
|
412da32293 | ||
|
f3b24dee65 | ||
|
d5024745f1 | ||
|
08baf5dedd | ||
|
d4c50dabaf | ||
007f49b671 | |||
c0ca9de5a0 | |||
2585017905 | |||
e715f6ae6f | |||
|
88bdce33c9 | ||
|
5850ef7dce | ||
|
b91abe1e68 | ||
|
3f944bdf73 | ||
|
400d192fb0 | ||
|
ea3f61897c | ||
|
abf9c3e4fd | ||
|
02f250c76e | ||
|
24916c5806 | ||
|
970c5f5e8b | ||
|
bb37a27321 | ||
d737f4891f | |||
|
29654a9b91 | ||
|
92b62a3cbe | ||
|
e8da0dc76f | ||
|
8b90267e8d | ||
|
a3abf40f44 | ||
|
ded8304c66 | ||
|
b145624f4c | ||
|
c530abd298 | ||
bac2745e3b | |||
|
6f8830a77c | ||
1a351e3184 | |||
a58f805498 | |||
5f521fb9e3 | |||
|
021db5679a | ||
|
de4d927c73 | ||
12365f7863 | |||
fa1883832c | |||
3ca99e8d1c | |||
|
a5c9b85b19 | ||
|
8884389c6a | ||
|
07459e5e89 | ||
|
12ca854c48 | ||
d3f30dbdbd | |||
e7a004d0e7 | |||
|
1f7980e2ca | ||
2829623487 | |||
|
fff0fd762d | ||
|
93b5bc8680 | ||
311d325fd3 | |||
|
074694bfac | ||
db4f605404 | |||
|
662c1c26b3 | ||
|
278d9655f6 | ||
|
501c07d87b | ||
|
307f32bb7b | ||
|
425e7bc653 | ||
|
e82023f105 | ||
|
ba1219b790 | ||
|
2b9617232e | ||
|
5b1147da5d | ||
d2d82b19a4 | |||
|
b27b27f067 | ||
|
f041370c62 | ||
|
7be98978dd | ||
|
8ec3d66570 | ||
|
45cb9a2d70 | ||
|
ecc752d31a | ||
|
59c7fed566 | ||
|
c3d5a1042c | ||
|
a0d6b05ceb | ||
47c545b7f1 | |||
|
3ff96e453c | ||
|
c3c9bf772d | ||
|
289b85a549 | ||
|
be4e7ab2bd | ||
|
026537c75b | ||
|
10759f6882 | ||
|
280288b123 | ||
|
3e360aab15 | ||
|
d840ef7271 | ||
a3c421d34a | |||
|
9bb62cf966 | ||
|
90734196e5 | ||
5c286c6b97 | |||
|
3efa557976 | ||
645039a6d4 |
@ -6,7 +6,7 @@ module.exports = {
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended'
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs', 'licenseChecker.cjs', "*.min.js"],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
|
19
.git-hooks/commit-msg
Executable file
@ -0,0 +1,19 @@
|
||||
#!/bin/sh
|
||||
# Get the commit message (the parameter we're given is just the path to the
|
||||
# temporary file which holds the message).
|
||||
commit_message=$(cat "$1")
|
||||
|
||||
if (echo "$commit_message" | grep -Eq "^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([a-z0-9 \-]+\))?!?: .+$") then
|
||||
tput setaf 2;
|
||||
echo "✔ Commit message meets Conventional Commit standards"
|
||||
tput sgr0;
|
||||
exit 0
|
||||
fi
|
||||
|
||||
tput setaf 1;
|
||||
echo "❌ Commit message does not meet the Conventional Commit standard!"
|
||||
tput sgr0;
|
||||
echo "An example of a valid message is:"
|
||||
echo " feat(login): add the 'remember me' button"
|
||||
echo "📝 More details at: https://www.conventionalcommits.org/en/v1.0.0/#summary"
|
||||
exit 1
|
13
.git-hooks/pre-commit
Executable file
@ -0,0 +1,13 @@
|
||||
#!/bin/sh
|
||||
|
||||
# Avoid commits to the master branch
|
||||
BRANCH=`git rev-parse --abbrev-ref HEAD`
|
||||
REGEX="^(master|main|staging|development)$"
|
||||
|
||||
if [[ "$BRANCH" =~ $REGEX ]]; then
|
||||
echo "You are on branch $BRANCH. Are you sure you want to commit to this branch?"
|
||||
echo "If so, commit with -n to bypass the pre-commit hook."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
npm run lint-staged
|
@ -1,4 +1,4 @@
|
||||
name: Release
|
||||
name: Release to Production
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
@ -29,4 +29,6 @@ jobs:
|
||||
- name: Release Build
|
||||
run: |
|
||||
npm -g install cloudron-surfer
|
||||
surfer put --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io dist/* /
|
||||
surfer config --token ${{ secrets.CLOUDRON_SURFER_TOKEN }} --server sigit.io
|
||||
surfer put dist/* / --all -d
|
||||
surfer put dist/.well-known / --all
|
46
.gitea/workflows/release-staging.yaml
Normal file
@ -0,0 +1,46 @@
|
||||
name: Release to Staging
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- staging
|
||||
|
||||
jobs:
|
||||
build_and_release:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 18
|
||||
|
||||
- name: Audit
|
||||
run: npm audit --omit=dev
|
||||
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: License check
|
||||
run: npm run license-checker
|
||||
|
||||
- name: Lint check
|
||||
run: npm run lint
|
||||
|
||||
- name: Formatter check
|
||||
run: npm run formatter:check
|
||||
|
||||
- name: Create .env File
|
||||
run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
|
||||
|
||||
- name: Create Build
|
||||
run: npm run build
|
||||
|
||||
- name: Release Build
|
||||
run: |
|
||||
npm -g install cloudron-surfer
|
||||
surfer config --token ${{ secrets.STAGING_CLOUDRON_SURFER_TOKEN }} --server staging.sigit.io
|
||||
surfer put dist/* / --all -d
|
||||
surfer put dist/.well-known / --all
|
34
.gitea/workflows/staging-pull-request.yaml
Normal file
@ -0,0 +1,34 @@
|
||||
name: Open PR on Staging
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, edited, synchronize]
|
||||
branches:
|
||||
- staging
|
||||
|
||||
jobs:
|
||||
audit_and_check:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 18
|
||||
|
||||
- name: Audit
|
||||
run: npm audit --omit=dev
|
||||
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: License check
|
||||
run: npm run license-checker
|
||||
|
||||
- name: Lint check
|
||||
run: npm run lint
|
||||
|
||||
- name: Formatter check
|
||||
run: npm run formatter:check
|
661
LICENSE
Normal file
@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
@ -2,12 +2,13 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/FAVICON.png" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SIGit</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="/opentimestamps.min.js"></script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
28
licenseChecker.cjs
Normal file
@ -0,0 +1,28 @@
|
||||
const process = require('node:process')
|
||||
const licenseChecker = require('license-checker')
|
||||
|
||||
const check = (cwd) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
licenseChecker.init(
|
||||
{
|
||||
production: true,
|
||||
start: cwd,
|
||||
excludePrivatePackages: true,
|
||||
onlyAllow:
|
||||
'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;BSD 3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
|
||||
excludePackages: ''
|
||||
},
|
||||
(error, json) => {
|
||||
if (error) {
|
||||
reject(error)
|
||||
} else {
|
||||
resolve(json)
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
check(process.cwd(), true)
|
||||
.then(() => console.log('All packages are licensed properly'))
|
||||
.catch((err) => console.log('license checker err', err))
|
4126
package-lock.json
generated
47
package.json
@ -1,61 +1,92 @@
|
||||
{
|
||||
"name": "web",
|
||||
"name": "sigit",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.0-beta",
|
||||
"type": "module",
|
||||
"homepage": "https://sigit.io/",
|
||||
"license": "AGPL-3.0-or-later ",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
|
||||
"formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
|
||||
"preview": "vite preview"
|
||||
"formatter:staged": "prettier --write --ignore-unknown",
|
||||
"preview": "vite preview",
|
||||
"preinstall": "git config core.hooksPath .git-hooks",
|
||||
"license-checker": "node licenseChecker.cjs",
|
||||
"lint-staged": "lint-staged"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "11.11.4",
|
||||
"@emotion/styled": "11.11.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.6.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@mui/icons-material": "5.15.11",
|
||||
"@mui/lab": "5.0.0-alpha.166",
|
||||
"@mui/material": "5.15.11",
|
||||
"@noble/hashes": "^1.4.0",
|
||||
"@nostr-dev-kit/ndk": "2.5.0",
|
||||
"@pdf-lib/fontkit": "^1.1.1",
|
||||
"@reduxjs/toolkit": "2.2.1",
|
||||
"axios": "1.6.7",
|
||||
"axios": "^1.7.4",
|
||||
"crypto-hash": "3.0.0",
|
||||
"crypto-js": "^4.2.0",
|
||||
"dnd-core": "16.0.1",
|
||||
"file-saver": "2.0.5",
|
||||
"idb": "8.0.0",
|
||||
"jszip": "3.10.1",
|
||||
"lodash": "4.17.21",
|
||||
"mui-file-input": "4.0.4",
|
||||
"nostr-tools": "2.3.1",
|
||||
"nostr-login": "^1.6.6",
|
||||
"nostr-tools": "2.7.0",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"pdfjs-dist": "^4.4.168",
|
||||
"rdndmb-html5-to-touch": "^8.0.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dnd": "16.0.1",
|
||||
"react-dnd-html5-backend": "16.0.1",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-multi-backend": "^8.0.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-redux": "9.1.0",
|
||||
"react-router-dom": "6.22.1",
|
||||
"react-singleton-hook": "^4.0.1",
|
||||
"react-toastify": "10.0.4",
|
||||
"redux": "5.0.1",
|
||||
"svgo": "^3.3.2",
|
||||
"tseep": "1.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/crypto-js": "^4.2.2",
|
||||
"@types/file-saver": "2.0.7",
|
||||
"@types/lodash": "4.14.202",
|
||||
"@types/pdfjs-dist": "^2.10.378",
|
||||
"@types/react": "^18.2.56",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"@types/svgo": "^3.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.0.2",
|
||||
"@typescript-eslint/parser": "^7.0.2",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.5",
|
||||
"license-checker": "^25.0.1",
|
||||
"lint-staged": "^15.2.8",
|
||||
"prettier": "3.2.5",
|
||||
"ts-css-modules-vite-plugin": "1.0.20",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.1.4"
|
||||
"vite": "^5.1.4",
|
||||
"vite-plugin-node-polyfills": "^0.22.0",
|
||||
"vite-tsconfig-paths": "4.3.2"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,ts,tsx}": [
|
||||
"npm run lint:staged"
|
||||
],
|
||||
"*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
|
||||
}
|
||||
}
|
||||
|
15
public/.well-known/nostr.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"names": {
|
||||
"_": "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90"
|
||||
},
|
||||
"relays": {
|
||||
"6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90": [
|
||||
"wss://brb.io",
|
||||
"wss://nostr.v0l.io",
|
||||
"wss://nostr.coinos.io",
|
||||
"wss://rsslay.nostr.net",
|
||||
"wss://relay.current.fyi",
|
||||
"wss://nos.io"
|
||||
]
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 80 KiB |
BIN
public/favicon.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
public/logo.png
Before Width: | Height: | Size: 72 KiB |
34
public/logo.svg
Normal file
@ -0,0 +1,34 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 734.95 255.06">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #47b17d;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #4c82a3;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #7d54a3;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<g>
|
||||
<g>
|
||||
<path class="cls-3" d="M335.64,100.98c0-4.9,.94-9.5,2.81-13.79,1.87-4.29,4.42-8.05,7.64-11.27,3.22-3.22,6.98-5.77,11.27-7.64,4.29-1.87,8.89-2.81,13.79-2.81h54.34v23.7h-54.34c-1.65,0-3.19,.3-4.62,.91-1.43,.61-2.68,1.45-3.76,2.52s-1.91,2.33-2.52,3.76c-.61,1.43-.91,2.97-.91,4.62s.3,3.21,.91,4.67c.61,1.46,1.45,2.73,2.52,3.8,1.07,1.07,2.33,1.91,3.76,2.52,1.43,.61,2.97,.91,4.62,.91h23.7c4.9,0,9.51,.92,13.83,2.77,4.32,1.85,8.09,4.38,11.31,7.6s5.75,6.99,7.6,11.31c1.84,4.32,2.77,8.93,2.77,13.83s-.92,9.5-2.77,13.79c-1.85,4.29-4.38,8.05-7.6,11.27s-6.99,5.77-11.31,7.64c-4.32,1.87-8.93,2.81-13.83,2.81h-52.61v-23.7h52.61c1.65,0,3.19-.3,4.62-.91,1.43-.61,2.68-1.45,3.76-2.52s1.91-2.33,2.52-3.76c.61-1.43,.91-2.97,.91-4.62s-.3-3.19-.91-4.62c-.61-1.43-1.45-2.68-2.52-3.76-1.07-1.07-2.33-1.91-3.76-2.52-1.43-.6-2.97-.91-4.62-.91h-23.7c-4.9,0-9.5-.94-13.79-2.81-4.29-1.87-8.05-4.42-11.27-7.64-3.22-3.22-5.77-6.99-7.64-11.31-1.87-4.32-2.81-8.93-2.81-13.83Z"/>
|
||||
<path class="cls-3" d="M469.59,183.9h-23.7V65.47h23.7v118.43Z"/>
|
||||
<path class="cls-3" d="M585.8,171.92c-5.51,4.68-11.64,8.27-18.42,10.78-6.77,2.5-13.82,3.76-21.14,3.76-5.62,0-11.03-.73-16.23-2.19-5.2-1.46-10.06-3.52-14.58-6.19-4.52-2.67-8.65-5.86-12.39-9.58-3.75-3.72-6.94-7.85-9.58-12.39s-4.7-9.43-6.15-14.66c-1.46-5.23-2.19-10.65-2.19-16.27s.73-11.01,2.19-16.19c1.46-5.17,3.51-10.03,6.15-14.58,2.64-4.54,5.83-8.67,9.58-12.39,3.74-3.72,7.87-6.9,12.39-9.54,4.51-2.64,9.37-4.69,14.58-6.15s10.61-2.19,16.23-2.19c7.32,0,14.37,1.25,21.14,3.76,6.77,2.51,12.91,6.1,18.42,10.78l-12.39,20.65c-3.58-3.63-7.71-6.48-12.39-8.55-4.68-2.06-9.61-3.1-14.78-3.1s-10.03,.99-14.58,2.97c-4.54,1.98-8.52,4.67-11.93,8.05-3.41,3.39-6.11,7.35-8.09,11.89-1.98,4.54-2.97,9.4-2.97,14.58s.99,10.13,2.97,14.7c1.98,4.57,4.68,8.56,8.09,11.98,3.41,3.41,7.39,6.11,11.93,8.09,4.54,1.98,9.4,2.97,14.58,2.97,2.97,0,5.86-.36,8.67-1.07,2.81-.71,5.48-1.71,8.01-2.97v-33.7h22.88v46.75Z"/>
|
||||
<path class="cls-3" d="M627.75,183.9h-23.7V65.47h23.7v118.43Z"/>
|
||||
<path class="cls-3" d="M699.44,183.9h-23.62V89.17h-35.6v-23.7h94.73v23.7h-35.51v94.73Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-2" d="M181.53,115.06h0c-9.4-36.67-56.77-24.79-121.09-12.57C-3.54,114.64-25.35,19.85,37.72,3.62,46.91,1.26,56.55,0,66.47,0c63.55,0,115.06,51.51,115.06,115.06Z"/>
|
||||
<path class="cls-1" d="M100,140h0c9.4,36.67,56.77,24.79,121.09,12.57,63.98-12.16,85.79,82.64,22.72,98.86-9.19,2.36-18.83,3.62-28.76,3.62-63.55,0-115.06-51.51-115.06-115.06Z"/>
|
||||
<circle class="cls-3" cx="140.77" cy="127.53" r="24.88"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 2.9 KiB |
2
public/opentimestamps.min.js
vendored
Normal file
42
src/App.css
@ -1,42 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
171
src/App.scss
Normal file
@ -0,0 +1,171 @@
|
||||
@import './styles/colors.scss';
|
||||
@import './styles/sizes.scss';
|
||||
@import './styles/typography.scss';
|
||||
|
||||
:root {
|
||||
// Import colors once as variables
|
||||
--primary-main: #{$primary-main};
|
||||
--primary-light: #{$primary-light};
|
||||
--primary-dark: #{$primary-dark};
|
||||
|
||||
--secondary-main: #{$secondary-main};
|
||||
|
||||
--box-shadow-color: #{$box-shadow-color};
|
||||
--border-color: #{$border-color};
|
||||
|
||||
--body-background-color: #{$body-background-color};
|
||||
--overlay-background-color: #{$overlay-background-color};
|
||||
|
||||
--text-color: #{$text-color};
|
||||
--input-text-color: #{$input-text-color};
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
background: $body-background-color;
|
||||
font-family: $font-familiy;
|
||||
letter-spacing: $letter-spacing;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $body-font-weight;
|
||||
line-height: $body-line-height;
|
||||
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: $primary-main;
|
||||
text-decoration: none;
|
||||
text-decoration-color: inherit;
|
||||
transition: ease 0.4s;
|
||||
outline: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none; /* Removes bullet points */
|
||||
margin: 0; /* Removes default margin */
|
||||
padding: 0; /* Removes default padding */
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none; /* Removes the bullets */
|
||||
margin: 0; /* Removes any default margin */
|
||||
padding: 0; /* Removes any default padding */
|
||||
}
|
||||
|
||||
// Shared styles for center content (Create, Sign, Verify)
|
||||
.files-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
position: relative;
|
||||
|
||||
// CSS, scroll position when scrolling to the files is adjusted by
|
||||
// - first-child Header height, default body padding, and center content border (10px) and padding (10px)
|
||||
// - others We don't include border and padding and scroll to the top of the image
|
||||
&:first-child {
|
||||
scroll-margin-top: $body-vertical-padding + 20px;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
scroll-margin-top: $body-vertical-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// For pdf marks
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain; /* Ensure the image fits within the container */
|
||||
}
|
||||
}
|
||||
|
||||
// For image rendering (uploaded image as a file)
|
||||
.file-image {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain; /* Ensure the image fits within the container */
|
||||
}
|
||||
|
||||
// Consistent styling for every file mark
|
||||
// Reverts some of the design defaults for font
|
||||
.file-mark {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 1;
|
||||
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
outline: 1px solid transparent;
|
||||
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
|
||||
scroll-margin-top: $body-vertical-padding;
|
||||
}
|
||||
|
||||
[data-dev='true'] {
|
||||
.image-wrapper {
|
||||
// outline: 1px solid #ccc; /* Optional: for visual debugging */
|
||||
background-color: #e0f7fa; /* Optional: for visual debugging */
|
||||
}
|
||||
}
|
||||
|
||||
.extension-file-box {
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
font-size: 14px;
|
||||
}
|
69
src/App.tsx
@ -1,38 +1,32 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { useAppSelector } from './hooks/store'
|
||||
import { Navigate, Route, Routes } from 'react-router-dom'
|
||||
import { AuthController, NostrController } from './controllers'
|
||||
import { AuthController } from './controllers'
|
||||
import { MainLayout } from './layouts/Main'
|
||||
import {
|
||||
appPrivateRoutes,
|
||||
appPublicRoutes,
|
||||
privateRoutes,
|
||||
publicRoutes
|
||||
publicRoutes,
|
||||
recursiveRouteRenderer
|
||||
} from './routes'
|
||||
import { State } from './store/rootReducer'
|
||||
import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
|
||||
import './App.scss'
|
||||
|
||||
const App = () => {
|
||||
const authState = useSelector((state: State) => state.auth)
|
||||
const authState = useAppSelector((state) => state.auth)
|
||||
|
||||
useEffect(() => {
|
||||
generateBunkerDelegatedKey()
|
||||
if (window.location.hostname === '0.0.0.0') {
|
||||
// A change of the host is needed to make library available in windows object
|
||||
// the app can't encrypt files without the crypto library
|
||||
// which is only available on https or localhost
|
||||
window.location.hostname = 'localhost'
|
||||
}
|
||||
|
||||
const authController = new AuthController()
|
||||
authController.checkSession()
|
||||
}, [])
|
||||
|
||||
const generateBunkerDelegatedKey = () => {
|
||||
const existingKey = getNsecBunkerDelegatedKey()
|
||||
|
||||
if (!existingKey) {
|
||||
const nostrController = NostrController.getInstance()
|
||||
const newDelegatedKey = nostrController.generateDelegatedKey()
|
||||
|
||||
saveNsecBunkerDelegatedKey(newDelegatedKey)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRootRedirect = () => {
|
||||
if (authState.loggedIn) return appPrivateRoutes.homePage
|
||||
const callbackPathEncoded = btoa(
|
||||
@ -41,39 +35,18 @@ const App = () => {
|
||||
return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
|
||||
}
|
||||
|
||||
// Hide route only if loggedIn and r.hiddenWhenLoggedIn are both true
|
||||
const publicRoutesList = recursiveRouteRenderer(publicRoutes, (r) => {
|
||||
return !authState.loggedIn || !r.hiddenWhenLoggedIn
|
||||
})
|
||||
|
||||
const privateRouteList = recursiveRouteRenderer(privateRoutes)
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<MainLayout />}>
|
||||
{authState?.loggedIn &&
|
||||
privateRoutes.map((route, index) => (
|
||||
<Route
|
||||
key={route.path + index}
|
||||
path={route.path}
|
||||
element={route.element}
|
||||
/>
|
||||
))}
|
||||
{publicRoutes.map((route, index) => {
|
||||
if (authState?.loggedIn) {
|
||||
if (!route.hiddenWhenLoggedIn) {
|
||||
return (
|
||||
<Route
|
||||
key={route.path + index}
|
||||
path={route.path}
|
||||
element={route.element}
|
||||
/>
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<Route
|
||||
key={route.path + index}
|
||||
path={route.path}
|
||||
element={route.element}
|
||||
/>
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
{authState?.loggedIn && privateRouteList}
|
||||
{publicRoutesList}
|
||||
<Route path="*" element={<Navigate to={handleRootRedirect()} />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
|
BIN
src/assets/fonts/roboto-bold.woff
Normal file
BIN
src/assets/fonts/roboto-bold.woff2
Normal file
BIN
src/assets/fonts/roboto-light.woff
Normal file
BIN
src/assets/fonts/roboto-light.woff2
Normal file
BIN
src/assets/fonts/roboto-medium.woff
Normal file
BIN
src/assets/fonts/roboto-medium.woff2
Normal file
BIN
src/assets/fonts/roboto-regular.ttf
Normal file
BIN
src/assets/fonts/roboto-regular.woff
Normal file
BIN
src/assets/fonts/roboto-regular.woff2
Normal file
Before Width: | Height: | Size: 169 KiB |
6
src/assets/images/bg_l.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path d="M113.31,3.31C73.23,10.93,35.28,18.5,0,24.8V307.11c30.14,8.31,61.89,12.76,94.68,12.76,30.67,0,60.43-3.88,88.82-11.19C378.31,258.56,310.93-34.23,113.31,3.31Z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 364 B |
6
src/assets/images/bg_r.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path d="M205.32,0c-30.67,0-60.43,3.88-88.82,11.19C-78.31,61.31-10.93,354.1,186.69,316.56c40.08-7.61,78.02-15.18,113.31-21.49V12.76C269.86,4.45,238.11,0,205.32,0Z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 362 B |
Before Width: | Height: | Size: 85 KiB |
BIN
src/assets/images/nostr.gif
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/placeholder.png
Normal file
After Width: | Height: | Size: 16 KiB |
@ -1,50 +0,0 @@
|
||||
$primary-main: var(--mui-palette-primary-main);
|
||||
$primary-light: var(--mui-palette-primary-light);
|
||||
$primary-dark: var(--mui-palette-primary-dark);
|
||||
|
||||
$box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
$border-color: #27323c;
|
||||
|
||||
$page-background-color: #f4f4fb;
|
||||
$modal-input-background: #f4f4fb;
|
||||
$background-color: #fff;
|
||||
|
||||
$text-color: #3e3e3e;
|
||||
$input-text-color: #717171;
|
||||
$info-text-color: #4169e1;
|
||||
|
||||
$icon-color: #c1c1c1;
|
||||
$zap-icon-color: #ffd700;
|
||||
|
||||
$btn-background-color: $primary-main;
|
||||
$btn-color: #fff;
|
||||
|
||||
$progress-box-background-color: $primary-main;
|
||||
$progress-box-inner-background-color: $primary-dark;
|
||||
$rank-progress-background-color: #445c76;
|
||||
|
||||
$correct-answer-background-color: $primary-light;
|
||||
$incorrect-answer-background-color: #e84d67;
|
||||
$incorrect-answer-label-color: #fff;
|
||||
|
||||
$checkbox-border-color: #ccc;
|
||||
$checkbox-hover-border-color: #888;
|
||||
$checkbox-checked-background-color: $primary-main;
|
||||
$checkbox-checked-color: #fff;
|
||||
|
||||
$comment-notice-background-color: #0d6efd;
|
||||
$comment-notice-color: #fff;
|
||||
$comment-divider-color: #eee;
|
||||
|
||||
$activated-topic-background-color: var(--mui-palette-info-dark);
|
||||
|
||||
$error-msg-color: red;
|
||||
$suggestion-box-heading-color: #dfe0e0;
|
||||
|
||||
$callOut-success-background: $primary-light;
|
||||
$callOut-success-color: $primary-dark;
|
||||
|
||||
$review-feedback-correct: #178b13;
|
||||
$review-feedback-incorrect: #d82222;
|
||||
$review-feedback-neutral: #f39220;
|
||||
$review-feedback-selected-color: #fff;
|
@ -9,64 +9,58 @@ import {
|
||||
} from '@mui/material'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import {
|
||||
setAuthState,
|
||||
setMetadataEvent,
|
||||
userLogOutAction
|
||||
} from '../../store/actions'
|
||||
import { State } from '../../store/rootReducer'
|
||||
import { Dispatch } from '../../store/store'
|
||||
import { useAppSelector } from '../../hooks/store'
|
||||
import Username from '../username'
|
||||
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { MetadataController, NostrController } from '../../controllers'
|
||||
import {
|
||||
appPublicRoutes,
|
||||
appPrivateRoutes,
|
||||
getProfileRoute
|
||||
} from '../../routes'
|
||||
import {
|
||||
clearAuthToken,
|
||||
saveNsecBunkerDelegatedKey,
|
||||
shorten
|
||||
} from '../../utils'
|
||||
import { getProfileUsername, hexToNpub } from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
||||
import { Container } from '../Container'
|
||||
import { ButtonIcon } from '../ButtonIcon'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faClose } from '@fortawesome/free-solid-svg-icons'
|
||||
import useMediaQuery from '@mui/material/useMediaQuery'
|
||||
import { useLogout } from '../../hooks/useLogout'
|
||||
|
||||
const metadataController = new MetadataController()
|
||||
import { launch as launchNostrLoginDialog } from 'nostr-login'
|
||||
|
||||
export const AppBar = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const dispatch: Dispatch = useDispatch()
|
||||
|
||||
const logout = useLogout()
|
||||
const [username, setUsername] = useState('')
|
||||
const [userAvatar, setUserAvatar] = useState('')
|
||||
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
|
||||
|
||||
const authState = useSelector((state: State) => state.auth)
|
||||
const metadataState = useSelector((state: State) => state.metadata)
|
||||
const userRobotImage = useSelector((state: State) => state.userRobotImage)
|
||||
const authState = useAppSelector((state) => state.auth)
|
||||
const metadataState = useAppSelector((state) => state.metadata)
|
||||
const userRobotImage = useAppSelector((state) => state.userRobotImage)
|
||||
|
||||
useEffect(() => {
|
||||
if (metadataState) {
|
||||
if (metadataState.content) {
|
||||
const { picture, display_name, name } = JSON.parse(
|
||||
metadataState.content
|
||||
)
|
||||
const profileMetadata = JSON.parse(metadataState.content)
|
||||
const { picture } = profileMetadata
|
||||
|
||||
if (picture || userRobotImage) {
|
||||
setUserAvatar(picture || userRobotImage)
|
||||
}
|
||||
|
||||
setUsername(shorten(display_name || name || '', 7))
|
||||
const npub = authState.usersPubkey
|
||||
? hexToNpub(authState.usersPubkey)
|
||||
: ''
|
||||
|
||||
setUsername(getProfileUsername(npub, profileMetadata))
|
||||
} else {
|
||||
setUserAvatar(userRobotImage || '')
|
||||
setUsername('')
|
||||
}
|
||||
}
|
||||
}, [metadataState, userRobotImage])
|
||||
}, [metadataState, userRobotImage, authState.usersPubkey])
|
||||
|
||||
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorElUser(event.currentTarget)
|
||||
@ -85,127 +79,157 @@ export const AppBar = () => {
|
||||
|
||||
const handleLogout = () => {
|
||||
handleCloseUserMenu()
|
||||
dispatch(
|
||||
setAuthState({
|
||||
keyPair: undefined,
|
||||
loggedIn: false,
|
||||
usersPubkey: undefined,
|
||||
loginMethod: undefined,
|
||||
nsecBunkerPubkey: undefined
|
||||
})
|
||||
)
|
||||
dispatch(setMetadataEvent(metadataController.getEmptyMetadataEvent()))
|
||||
dispatch(setUserRobotImage(null))
|
||||
|
||||
// clear authToken saved in local storage
|
||||
clearAuthToken()
|
||||
|
||||
dispatch(userLogOutAction())
|
||||
|
||||
// update nsecBunker delegated key after logout
|
||||
const nostrController = NostrController.getInstance()
|
||||
const newDelegatedKey = nostrController.generateDelegatedKey()
|
||||
saveNsecBunkerDelegatedKey(newDelegatedKey)
|
||||
|
||||
logout()
|
||||
navigate('/')
|
||||
}
|
||||
const isAuthenticated = authState?.loggedIn === true
|
||||
|
||||
const matches = useMediaQuery('(max-width:767px)')
|
||||
const [isBannerVisible, setIsBannerVisible] = useState(true)
|
||||
const handleBannerHide = () => {
|
||||
setIsBannerVisible(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppBarMui position="fixed" className={styles.AppBar}>
|
||||
<Toolbar className={styles.toolbar}>
|
||||
<Box className={styles.logoWrapper}>
|
||||
<img src="/logo.png" alt="Logo" onClick={() => navigate('/')} />
|
||||
</Box>
|
||||
|
||||
<Box className={styles.rightSideBox}>
|
||||
{!isAuthenticated && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate(appPublicRoutes.login)
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isAuthenticated && (
|
||||
<>
|
||||
<Username
|
||||
username={username}
|
||||
avatarContent={userAvatar}
|
||||
handleClick={handleOpenUserMenu}
|
||||
/>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
open={!!anchorElUser}
|
||||
onClose={handleCloseUserMenu}
|
||||
<>
|
||||
{isAuthenticated && isBannerVisible && (
|
||||
<div className={styles.banner}>
|
||||
<Container>
|
||||
<div className={styles.bannerInner}>
|
||||
<p className={styles.bannerText}>
|
||||
SIGit is currently Beta software (available for user experience
|
||||
testing), use at your own risk!
|
||||
</p>
|
||||
<Button
|
||||
aria-label={`close banner`}
|
||||
variant="text"
|
||||
onClick={handleBannerHide}
|
||||
>
|
||||
<MenuItem
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
display: { md: 'none' }
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">{username}</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleProfile}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorElUser(null)
|
||||
<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>
|
||||
|
||||
navigate(appPrivateRoutes.relays)
|
||||
}}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
<Box className={styles.rightSideBox}>
|
||||
{!isAuthenticated && (
|
||||
<Button
|
||||
startIcon={<ButtonIcon />}
|
||||
onClick={() => {
|
||||
launchNostrLoginDialog()
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
Relays
|
||||
</MenuItem>
|
||||
<Link
|
||||
to={appPublicRoutes.help}
|
||||
target="_blank"
|
||||
style={{ color: 'inherit', textDecoration: 'inherit' }}
|
||||
>
|
||||
<MenuItem
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
LOGIN
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isAuthenticated && (
|
||||
<>
|
||||
<Username
|
||||
username={username}
|
||||
avatarContent={userAvatar}
|
||||
handleClick={handleOpenUserMenu}
|
||||
/>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
open={!!anchorElUser}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
Help
|
||||
</MenuItem>
|
||||
</Link>
|
||||
<MenuItem
|
||||
onClick={handleLogout}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBarMui>
|
||||
<MenuItem
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
display: { md: 'none' },
|
||||
fontWeight: 500,
|
||||
fontSize: '14px',
|
||||
color: 'var(--text-color)'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">{username}</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleProfile}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorElUser(null)
|
||||
|
||||
navigate(appPrivateRoutes.settings)
|
||||
}}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorElUser(null)
|
||||
|
||||
navigate(appPublicRoutes.verify)
|
||||
}}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Verify
|
||||
</MenuItem>
|
||||
<Link
|
||||
to={appPublicRoutes.source}
|
||||
target="_blank"
|
||||
style={{ color: 'inherit', textDecoration: 'inherit' }}
|
||||
>
|
||||
<MenuItem
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Source
|
||||
</MenuItem>
|
||||
</Link>
|
||||
<MenuItem
|
||||
onClick={handleLogout}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBarMui>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -1,12 +1,14 @@
|
||||
@import '../../colors.scss';
|
||||
@import '../../styles/colors.scss';
|
||||
@import '../../styles/sizes.scss';
|
||||
|
||||
.AppBar {
|
||||
background-color: $background-color !important;
|
||||
z-index: 1400 !important;
|
||||
height: 60px;
|
||||
background-color: $overlay-background-color !important;
|
||||
height: $header-height;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.075);
|
||||
|
||||
.toolbar {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
@ -32,3 +34,42 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
color: #ffffff;
|
||||
background-color: $primary-main;
|
||||
}
|
||||
|
||||
.bannerInner {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-block: 10px;
|
||||
z-index: 1;
|
||||
|
||||
width: 100%;
|
||||
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
|
||||
button {
|
||||
min-width: 44px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus-within {
|
||||
background: $primary-main;
|
||||
color: inherit;
|
||||
|
||||
button {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bannerText {
|
||||
margin-left: 54px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
14
src/components/ButtonIcon/index.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import styles from './style.module.scss'
|
||||
import placeholder from '../../assets/images/placeholder.png'
|
||||
|
||||
interface ButtonIconProps {
|
||||
src?: string
|
||||
alt?: string
|
||||
}
|
||||
|
||||
export const ButtonIcon = ({
|
||||
src = placeholder,
|
||||
alt = ''
|
||||
}: ButtonIconProps) => {
|
||||
return <img src={src} alt={alt} className={styles.icon}></img>
|
||||
}
|
5
src/components/ButtonIcon/style.module.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.icon {
|
||||
border-radius: 100px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
36
src/components/Container/index.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { CSSProperties, PropsWithChildren } from 'react'
|
||||
import defaultStyle from './style.module.scss'
|
||||
|
||||
interface ContainerProps {
|
||||
style?: CSSProperties
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Container component with pre-defined width, padding and margins for top level layout.
|
||||
*
|
||||
* **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
|
||||
* - When using *className* override, that styles are imported after the actual `Container` component
|
||||
* ```
|
||||
* import { Container } from './components/Container'
|
||||
* import styles from './style.module.scss'
|
||||
* ```
|
||||
* - or add *!important* to imported styles
|
||||
* - or override styles with *CSSProperties* object
|
||||
*/
|
||||
export const Container = ({
|
||||
style = {},
|
||||
className = '',
|
||||
children
|
||||
}: PropsWithChildren<ContainerProps>) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...style
|
||||
}}
|
||||
className={`${defaultStyle.container} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
8
src/components/Container/style.module.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import '../../styles/sizes.scss';
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
padding-inline: $default-container-padding-inline;
|
||||
margin-inline: auto;
|
||||
}
|
132
src/components/DisplaySigit/index.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
import { Meta } from '../../types'
|
||||
import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { formatTimestamp, npubToHex } from '../../utils'
|
||||
import { appPublicRoutes, appPrivateRoutes } from '../../routes'
|
||||
import { Button, Divider, Tooltip } from '@mui/material'
|
||||
import { DisplaySigner } from '../DisplaySigner'
|
||||
import {
|
||||
faArchive,
|
||||
faCalendar,
|
||||
faCopy,
|
||||
faEye,
|
||||
faFile,
|
||||
faFileCircleExclamation
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { UserAvatarGroup } from '../UserAvatarGroup'
|
||||
|
||||
import styles from './style.module.scss'
|
||||
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
||||
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
||||
import { extractFileExtensions } from '../../utils/file'
|
||||
|
||||
type SigitProps = {
|
||||
sigitCreateId: string
|
||||
meta: Meta
|
||||
parsedMeta: SigitCardDisplayInfo
|
||||
}
|
||||
|
||||
export const DisplaySigit = ({
|
||||
meta,
|
||||
parsedMeta,
|
||||
sigitCreateId: sigitCreateId
|
||||
}: SigitProps) => {
|
||||
const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
|
||||
parsedMeta
|
||||
|
||||
const { signersStatus, fileHashes } = useSigitMeta(meta)
|
||||
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
|
||||
|
||||
return (
|
||||
<div className={styles.itemWrapper}>
|
||||
{signedStatus === SigitStatus.Complete && (
|
||||
<Link
|
||||
to={appPublicRoutes.verify}
|
||||
state={{ meta }}
|
||||
className={styles.insetLink}
|
||||
></Link>
|
||||
)}
|
||||
{signedStatus !== SigitStatus.Complete && (
|
||||
<Link
|
||||
to={`${appPrivateRoutes.sign}/${sigitCreateId}`}
|
||||
className={styles.insetLink}
|
||||
></Link>
|
||||
)}
|
||||
<p className={`line-clamp-2 ${styles.title}`}>{title}</p>
|
||||
<div className={styles.users}>
|
||||
{submittedBy && (
|
||||
<DisplaySigner
|
||||
status={isValid ? SignStatus.Signed : SignStatus.Invalid}
|
||||
pubkey={submittedBy}
|
||||
/>
|
||||
)}
|
||||
{submittedBy && signers.length ? (
|
||||
<Divider orientation="vertical" flexItem />
|
||||
) : null}
|
||||
<UserAvatarGroup max={7}>
|
||||
{signers.map((signer) => {
|
||||
const pubkey = npubToHex(signer)!
|
||||
return (
|
||||
<DisplaySigner
|
||||
key={pubkey}
|
||||
status={signersStatus[signer]}
|
||||
pubkey={pubkey}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
</div>
|
||||
<div className={`${styles.details} ${styles.iconLabel}`}>
|
||||
<FontAwesomeIcon icon={faCalendar} />
|
||||
{createdAt ? formatTimestamp(createdAt) : null}
|
||||
</div>
|
||||
<div className={`${styles.details} ${styles.status}`}>
|
||||
<span className={styles.iconLabel}>
|
||||
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
||||
</span>
|
||||
{extensions.length > 0 ? (
|
||||
<span className={styles.iconLabel}>
|
||||
{!isSame ? (
|
||||
<>
|
||||
<FontAwesomeIcon icon={faFile} /> Multiple File Types
|
||||
</>
|
||||
) : (
|
||||
getExtensionIconLabel(extensions[0])
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<FontAwesomeIcon icon={faFileCircleExclamation} /> —
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
}
|
114
src/components/DisplaySigit/style.module.scss
Normal file
@ -0,0 +1,114 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.itemWrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $overlay-background-color;
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
flex-direction: column;
|
||||
|
||||
&:only-child {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transition: opacity ease 0.2s;
|
||||
opacity: 0;
|
||||
width: 4px;
|
||||
background-color: $primary-main;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.itemActions {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.insetLink {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.itemActions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
transition: ease 0.2s;
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
flex-direction: column;
|
||||
background: $overlay-background-color;
|
||||
border-left: solid 1px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||
padding-top: 10px;
|
||||
margin-inline: -15px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.users {
|
||||
margin-top: auto;
|
||||
|
||||
display: flex;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.details {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.iconLabel {
|
||||
display: flex;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
a.itemWrapper:hover {
|
||||
text-decoration: none;
|
||||
}
|
56
src/components/DisplaySigner/index.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import { Badge } from '@mui/material'
|
||||
import styles from './style.module.scss'
|
||||
import { UserAvatar } from '../UserAvatar'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import {
|
||||
faCheck,
|
||||
faEllipsis,
|
||||
faExclamation,
|
||||
faEye,
|
||||
faHourglass,
|
||||
faQuestion
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { SignStatus } from '../../utils'
|
||||
import { Spinner } from '../Spinner'
|
||||
|
||||
type DisplaySignerProps = {
|
||||
pubkey: string
|
||||
status: SignStatus
|
||||
}
|
||||
|
||||
const getStatusIcon = (status: SignStatus) => {
|
||||
switch (status) {
|
||||
case SignStatus.Signed:
|
||||
return <FontAwesomeIcon icon={faCheck} />
|
||||
case SignStatus.Awaiting:
|
||||
return (
|
||||
<Spinner>
|
||||
<FontAwesomeIcon icon={faHourglass} />
|
||||
</Spinner>
|
||||
)
|
||||
case SignStatus.Pending:
|
||||
return <FontAwesomeIcon icon={faEllipsis} />
|
||||
case SignStatus.Invalid:
|
||||
return <FontAwesomeIcon icon={faExclamation} />
|
||||
case SignStatus.Viewer:
|
||||
return <FontAwesomeIcon icon={faEye} />
|
||||
|
||||
default:
|
||||
return <FontAwesomeIcon icon={faQuestion} />
|
||||
}
|
||||
}
|
||||
|
||||
export const DisplaySigner = ({ status, pubkey }: DisplaySignerProps) => {
|
||||
return (
|
||||
<Badge
|
||||
className={styles.signer}
|
||||
overlap="circular"
|
||||
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
badgeContent={
|
||||
<div className={styles.statusBadge}>{getStatusIcon(status)}</div>
|
||||
}
|
||||
>
|
||||
<UserAvatar pubkey={pubkey} />
|
||||
</Badge>
|
||||
)
|
||||
}
|
23
src/components/DisplaySigner/style.module.scss
Normal file
@ -0,0 +1,23 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.statusBadge {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
|
||||
color: white;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 10px;
|
||||
|
||||
background-color: $primary-main;
|
||||
}
|
||||
|
||||
.signer {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
673
src/components/DrawPDFFields/index.tsx
Normal file
@ -0,0 +1,673 @@
|
||||
import { Close } from '@mui/icons-material'
|
||||
import {
|
||||
FormControl,
|
||||
InputLabel,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
MenuItem,
|
||||
Select
|
||||
} from '@mui/material'
|
||||
import styles from './style.module.scss'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { ProfileMetadata, User, UserRole, KeyboardCode } from '../../types'
|
||||
import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
|
||||
import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
|
||||
import { SigitFile } from '../../utils/file'
|
||||
import { getToolboxLabelByMarkType } from '../../utils/mark'
|
||||
import { FileDivider } from '../FileDivider'
|
||||
import { ExtensionFileBox } from '../ExtensionFileBox'
|
||||
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
|
||||
import { useScale } from '../../hooks/useScale'
|
||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||
import { UserAvatar } from '../UserAvatar'
|
||||
import _ from 'lodash'
|
||||
|
||||
const DEFAULT_START_SIZE = {
|
||||
width: 140,
|
||||
height: 40
|
||||
} as const
|
||||
|
||||
interface HideSignersForDrawnField {
|
||||
[key: number]: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
users: User[]
|
||||
metadata: { [key: string]: ProfileMetadata }
|
||||
sigitFiles: SigitFile[]
|
||||
setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
|
||||
selectedTool?: DrawTool
|
||||
}
|
||||
|
||||
export const DrawPDFFields = (props: Props) => {
|
||||
const { selectedTool, sigitFiles, setSigitFiles, users } = props
|
||||
|
||||
const signers = users.filter((u) => u.role === UserRole.signer)
|
||||
const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
|
||||
const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
|
||||
const [hideSignersForDrawnField, setHideSignersForDrawnField] =
|
||||
useState<HideSignersForDrawnField>({})
|
||||
|
||||
/**
|
||||
* Return first pubkey that is present in the signers list
|
||||
* @param pubkeys
|
||||
* @returns available pubkey or empty string
|
||||
*/
|
||||
const getAvailableSigner = (...pubkeys: string[]) => {
|
||||
const availableSigner: string | undefined = pubkeys.find((pubkey) =>
|
||||
signers.some((s) => s.pubkey === npubToHex(pubkey))
|
||||
)
|
||||
return availableSigner || ''
|
||||
}
|
||||
|
||||
const { to, from } = useScale()
|
||||
|
||||
const [mouseState, setMouseState] = useState<MouseState>({
|
||||
clicked: false
|
||||
})
|
||||
|
||||
const [activeDrawnField, setActiveDrawnField] = useState<{
|
||||
fileIndex: number
|
||||
pageIndex: number
|
||||
drawnFieldIndex: number
|
||||
}>()
|
||||
const isActiveDrawnField = (
|
||||
fileIndex: number,
|
||||
pageIndex: number,
|
||||
drawnFieldIndex: number
|
||||
) =>
|
||||
activeDrawnField?.fileIndex === fileIndex &&
|
||||
activeDrawnField?.pageIndex === pageIndex &&
|
||||
activeDrawnField?.drawnFieldIndex === drawnFieldIndex
|
||||
|
||||
/**
|
||||
* Drawing events
|
||||
*/
|
||||
useEffect(() => {
|
||||
window.addEventListener('pointerup', handlePointerUp)
|
||||
window.addEventListener('pointercancel', handlePointerUp)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('pointerup', handlePointerUp)
|
||||
window.removeEventListener('pointercancel', handlePointerUp)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const refreshPdfFiles = () => {
|
||||
setSigitFiles([...sigitFiles])
|
||||
}
|
||||
|
||||
/**
|
||||
* Fired only on when left (primary pointer interaction) clicking page image
|
||||
* Creates new drawnElement and pushes in the array
|
||||
* It is re rendered and visible right away
|
||||
*
|
||||
* @param event Pointer event
|
||||
* @param page PdfPage where press happened
|
||||
*/
|
||||
const handlePointerDown = (
|
||||
event: React.PointerEvent,
|
||||
page: PdfPage,
|
||||
fileIndex: number,
|
||||
pageIndex: number
|
||||
) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
|
||||
if (!selectedTool) {
|
||||
return
|
||||
}
|
||||
|
||||
const { x, y } = getPointerCoordinates(event)
|
||||
|
||||
const newField: DrawnField = {
|
||||
left: to(page.width, x),
|
||||
top: to(page.width, y),
|
||||
width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
|
||||
height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
|
||||
counterpart: getAvailableSigner(lastSigner, defaultSignerNpub),
|
||||
type: selectedTool.identifier
|
||||
}
|
||||
|
||||
page.drawnFields.push(newField)
|
||||
|
||||
setActiveDrawnField({
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex: page.drawnFields.length - 1
|
||||
})
|
||||
setMouseState((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
clicked: true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Drawing is finished, resets all the variables used to draw
|
||||
* @param event Pointer event
|
||||
*/
|
||||
const handlePointerUp = () => {
|
||||
setMouseState((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
clicked: false,
|
||||
dragging: false,
|
||||
resizing: false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* After {@link handlePointerDown} create an drawing element, this function gets called on every pixel moved
|
||||
* which alters the newly created drawing element, resizing it while pointer moves
|
||||
* @param event Pointer event
|
||||
* @param page PdfPage where moving is happening
|
||||
*/
|
||||
const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
|
||||
if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
|
||||
const lastElementIndex = page.drawnFields.length - 1
|
||||
|
||||
const lastDrawnField = page.drawnFields[lastElementIndex]
|
||||
|
||||
// Return early if we don't have lastDrawnField
|
||||
// Issue noticed in the console when dragging out of bounds
|
||||
// to the page below (without releaseing mouse click)
|
||||
if (!lastDrawnField) return
|
||||
|
||||
const { x, y } = getPointerCoordinates(event)
|
||||
|
||||
const width = to(page.width, x) - lastDrawnField.left
|
||||
const height = to(page.width, y) - lastDrawnField.top
|
||||
|
||||
lastDrawnField.width = width
|
||||
lastDrawnField.height = height
|
||||
|
||||
const currentDrawnFields = page.drawnFields
|
||||
|
||||
currentDrawnFields[lastElementIndex] = lastDrawnField
|
||||
|
||||
refreshPdfFiles()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fired when event happens on the drawn element which will be moved
|
||||
* pointer coordinates relative to drawn element will be stored
|
||||
* so when we start moving, offset can be calculated
|
||||
* x - offsetX
|
||||
* y - offsetY
|
||||
*
|
||||
* @param event Pointer event
|
||||
* @param drawnFieldIndex Which we are moving
|
||||
*/
|
||||
const handleDrawnFieldPointerDown = (
|
||||
event: React.PointerEvent,
|
||||
fileIndex: number,
|
||||
pageIndex: number,
|
||||
drawnFieldIndex: number
|
||||
) => {
|
||||
event.stopPropagation()
|
||||
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
|
||||
const drawingRectangleCoords = getPointerCoordinates(event)
|
||||
|
||||
setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
|
||||
setMouseState({
|
||||
dragging: true,
|
||||
clicked: false,
|
||||
coordsInWrapper: {
|
||||
x: drawingRectangleCoords.x,
|
||||
y: drawingRectangleCoords.y
|
||||
}
|
||||
})
|
||||
|
||||
// make signers dropdown visible
|
||||
setHideSignersForDrawnField((prev) => ({
|
||||
...prev,
|
||||
[drawnFieldIndex]: false
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
|
||||
* @param event Pointer event
|
||||
* @param drawnField which we are moving
|
||||
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||
*/
|
||||
const handleDrawnFieldPointerMove = (
|
||||
event: React.PointerEvent,
|
||||
drawnField: DrawnField,
|
||||
pageWidth: number
|
||||
) => {
|
||||
if (mouseState.dragging) {
|
||||
const { x, y, rect } = getPointerCoordinates(
|
||||
event,
|
||||
event.currentTarget.parentElement
|
||||
)
|
||||
const coordsOffset = mouseState.coordsInWrapper
|
||||
|
||||
if (coordsOffset) {
|
||||
let left = to(pageWidth, x - coordsOffset.x)
|
||||
let top = to(pageWidth, y - coordsOffset.y)
|
||||
|
||||
const rightLimit = to(pageWidth, rect.width) - drawnField.width
|
||||
const bottomLimit = to(pageWidth, rect.height) - drawnField.height
|
||||
|
||||
if (left < 0) left = 0
|
||||
if (top < 0) top = 0
|
||||
if (left > rightLimit) left = rightLimit
|
||||
if (top > bottomLimit) top = bottomLimit
|
||||
|
||||
drawnField.left = left
|
||||
drawnField.top = top
|
||||
|
||||
refreshPdfFiles()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fired when clicked on the resize handle, sets the state for a resize action
|
||||
* @param event Pointer event
|
||||
* @param drawnFieldIndex which we are resizing
|
||||
*/
|
||||
const handleResizePointerDown = (
|
||||
event: React.PointerEvent,
|
||||
fileIndex: number,
|
||||
pageIndex: number,
|
||||
drawnFieldIndex: number
|
||||
) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
event.stopPropagation()
|
||||
|
||||
setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
|
||||
setMouseState({
|
||||
resizing: true
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Resizes the drawn element by the mouse position
|
||||
* @param event Pointer event
|
||||
* @param drawnField which we are resizing
|
||||
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||
*/
|
||||
const handleResizePointerMove = (
|
||||
event: React.PointerEvent,
|
||||
drawnField: DrawnField,
|
||||
pageWidth: number
|
||||
) => {
|
||||
if (mouseState.resizing) {
|
||||
const { x, y } = getPointerCoordinates(
|
||||
event,
|
||||
// currentTarget = span handle
|
||||
// 1st parent = drawnField
|
||||
// 2nd parent = img
|
||||
event.currentTarget.parentElement?.parentElement
|
||||
)
|
||||
|
||||
const width = to(pageWidth, x) - drawnField.left
|
||||
const height = to(pageWidth, y) - drawnField.top
|
||||
|
||||
drawnField.width = width
|
||||
drawnField.height = height
|
||||
|
||||
refreshPdfFiles()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the drawn element using the indexes in the params
|
||||
* @param event Pointer event
|
||||
* @param pdfFileIndex pdf file index
|
||||
* @param pdfPageIndex pdf page index
|
||||
* @param drawnFileIndex drawn file index
|
||||
*/
|
||||
const handleRemovePointerDown = (
|
||||
event: React.PointerEvent,
|
||||
pdfFileIndex: number,
|
||||
pdfPageIndex: number,
|
||||
drawnFileIndex: number
|
||||
) => {
|
||||
event.stopPropagation()
|
||||
|
||||
const pages = sigitFiles[pdfFileIndex]?.pages
|
||||
if (pages) {
|
||||
pages[pdfPageIndex]?.drawnFields?.splice(drawnFileIndex, 1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Used to stop pointer click propagating to the parent elements
|
||||
* so select can work properly
|
||||
* @param event Pointer event
|
||||
*/
|
||||
const handleUserSelectPointerDown = (event: React.PointerEvent) => {
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Escape button-down event and hides all signers dropdowns
|
||||
* @param event SyntheticEvent event
|
||||
*/
|
||||
const handleEscapeButtonDown = (event: React.SyntheticEvent) => {
|
||||
// get native event
|
||||
const { nativeEvent } = event
|
||||
|
||||
//check if event is a keyboard event
|
||||
if (nativeEvent instanceof KeyboardEvent) {
|
||||
// check if event code is Escape
|
||||
if (nativeEvent.code === KeyboardCode.Escape) {
|
||||
// hide all signers dropdowns
|
||||
const newHideSignersForDrawnField: HideSignersForDrawnField = {}
|
||||
|
||||
Object.keys(hideSignersForDrawnField).forEach((key) => {
|
||||
// Object.keys always returns an array of strings,
|
||||
// that is why unknown type is used below
|
||||
newHideSignersForDrawnField[key as unknown as number] = true
|
||||
})
|
||||
|
||||
setHideSignersForDrawnField(newHideSignersForDrawnField)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the pointer coordinates relative to a element in the `event` param
|
||||
* @param event PointerEvent
|
||||
* @param customTarget coordinates relative to this element, if not provided
|
||||
* event.target will be used
|
||||
*/
|
||||
const getPointerCoordinates = (
|
||||
event: React.PointerEvent,
|
||||
customTarget?: HTMLElement | null
|
||||
) => {
|
||||
const target = customTarget ? customTarget : event.currentTarget
|
||||
const rect = target.getBoundingClientRect()
|
||||
|
||||
// Clamp X Y within the target
|
||||
const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
|
||||
const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
|
||||
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
rect
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the pdf pages and drawing elements
|
||||
*/
|
||||
const getPdfPages = (file: SigitFile, fileIndex: number) => {
|
||||
// Early return if this is not a pdf
|
||||
if (!file.isPdf) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
{file.pages?.map((page, pageIndex: number) => {
|
||||
return (
|
||||
<div
|
||||
key={pageIndex}
|
||||
className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
|
||||
tabIndex={-1}
|
||||
onKeyDown={(event) => handleEscapeButtonDown(event)}
|
||||
>
|
||||
<img
|
||||
onPointerMove={(event) => {
|
||||
handlePointerMove(event, page)
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
handlePointerDown(event, page, fileIndex, pageIndex)
|
||||
}}
|
||||
draggable="false"
|
||||
src={page.image}
|
||||
alt={`page ${pageIndex + 1} of ${file.name}`}
|
||||
/>
|
||||
|
||||
{page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
|
||||
return (
|
||||
<div
|
||||
key={drawnFieldIndex}
|
||||
onPointerDown={(event) =>
|
||||
handleDrawnFieldPointerDown(
|
||||
event,
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
}
|
||||
onPointerMove={(event) => {
|
||||
handleDrawnFieldPointerMove(event, drawnField, page.width)
|
||||
}}
|
||||
className={styles.drawingRectangle}
|
||||
style={{
|
||||
backgroundColor: drawnField.counterpart
|
||||
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
|
||||
: undefined,
|
||||
outlineColor: drawnField.counterpart
|
||||
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
|
||||
: undefined,
|
||||
left: inPx(from(page.width, drawnField.left)),
|
||||
top: inPx(from(page.width, drawnField.top)),
|
||||
width: inPx(from(page.width, drawnField.width)),
|
||||
height: inPx(from(page.width, drawnField.height)),
|
||||
pointerEvents: mouseState.clicked ? 'none' : 'all',
|
||||
touchAction: 'none',
|
||||
opacity:
|
||||
mouseState.dragging &&
|
||||
isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
? 0.8
|
||||
: undefined
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`file-mark ${styles.placeholder}`}
|
||||
style={{
|
||||
fontFamily: FONT_TYPE,
|
||||
fontSize: inPx(from(page.width, FONT_SIZE))
|
||||
}}
|
||||
>
|
||||
{getToolboxLabelByMarkType(drawnField.type) ||
|
||||
'placeholder'}
|
||||
</div>
|
||||
<span
|
||||
onPointerDown={(event) =>
|
||||
handleResizePointerDown(
|
||||
event,
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
}
|
||||
onPointerMove={(event) => {
|
||||
handleResizePointerMove(event, drawnField, page.width)
|
||||
}}
|
||||
className={styles.resizeHandle}
|
||||
style={{
|
||||
background:
|
||||
mouseState.resizing &&
|
||||
isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
? 'var(--primary-main)'
|
||||
: undefined
|
||||
}}
|
||||
></span>
|
||||
<span
|
||||
onPointerDown={(event) => {
|
||||
handleRemovePointerDown(
|
||||
event,
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
}}
|
||||
className={styles.removeHandle}
|
||||
>
|
||||
<Close fontSize="small" />
|
||||
</span>
|
||||
{!isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
) &&
|
||||
!!drawnField.counterpart && (
|
||||
<div className={styles.counterpartAvatar}>
|
||||
<UserAvatar
|
||||
pubkey={npubToHex(drawnField.counterpart)!}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
) &&
|
||||
(!hideSignersForDrawnField ||
|
||||
!hideSignersForDrawnField[drawnFieldIndex]) && (
|
||||
<div
|
||||
onPointerDown={handleUserSelectPointerDown}
|
||||
className={styles.userSelect}
|
||||
>
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel id="counterparts">
|
||||
Counterpart
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={getAvailableSigner(drawnField.counterpart)}
|
||||
onChange={(event) => {
|
||||
drawnField.counterpart = event.target.value
|
||||
setLastSigner(event.target.value)
|
||||
refreshPdfFiles()
|
||||
}}
|
||||
labelId="counterparts"
|
||||
label="Counterparts"
|
||||
sx={{
|
||||
background: 'white'
|
||||
}}
|
||||
renderValue={(value) =>
|
||||
renderCounterpartValue(value)
|
||||
}
|
||||
>
|
||||
{signers.map((signer, index) => {
|
||||
const npub = hexToNpub(signer.pubkey)
|
||||
const metadata = props.metadata[signer.pubkey]
|
||||
const displayValue = getProfileUsername(
|
||||
npub,
|
||||
metadata
|
||||
)
|
||||
// make current signers dropdown visible
|
||||
if (
|
||||
hideSignersForDrawnField[drawnFieldIndex] ===
|
||||
undefined ||
|
||||
hideSignersForDrawnField[drawnFieldIndex] ===
|
||||
true
|
||||
) {
|
||||
setHideSignersForDrawnField((prev) => ({
|
||||
...prev,
|
||||
[drawnFieldIndex]: false
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<MenuItem key={index} value={npub}>
|
||||
<ListItemIcon>
|
||||
<AvatarIconButton
|
||||
src={metadata?.picture}
|
||||
hexKey={signer.pubkey}
|
||||
aria-label={`account of user ${displayValue}`}
|
||||
color="inherit"
|
||||
sx={{
|
||||
padding: 0,
|
||||
'> img': {
|
||||
width: '30px',
|
||||
height: '30px'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText>{displayValue}</ListItemText>
|
||||
</MenuItem>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const renderCounterpartValue = (npub: string) => {
|
||||
let displayValue = _.truncate(npub, { length: 16 })
|
||||
|
||||
const signer = signers.find((u) => u.pubkey === npubToHex(npub))
|
||||
if (signer) {
|
||||
const metadata = props.metadata[signer.pubkey]
|
||||
displayValue = getProfileUsername(npub, metadata)
|
||||
|
||||
return (
|
||||
<div className={styles.counterpartSelectValue}>
|
||||
<AvatarIconButton
|
||||
src={props.metadata[signer.pubkey]?.picture}
|
||||
hexKey={signer.pubkey || undefined}
|
||||
sx={{
|
||||
padding: 0,
|
||||
marginRight: '6px',
|
||||
'> img': {
|
||||
width: '21px',
|
||||
height: '21px'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{displayValue}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return displayValue
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="files-wrapper">
|
||||
{sigitFiles.map((file, i) => {
|
||||
return (
|
||||
<React.Fragment key={file.name}>
|
||||
<div className="file-wrapper" id={`file-${file.name}`}>
|
||||
{file.isPdf && getPdfPages(file, i)}
|
||||
{file.isImage && (
|
||||
<img
|
||||
className="file-image"
|
||||
src={file.objectUrl}
|
||||
alt={file.name}
|
||||
/>
|
||||
)}
|
||||
{!(file.isPdf || file.isImage) && (
|
||||
<ExtensionFileBox extension={file.extension} />
|
||||
)}
|
||||
</div>
|
||||
{i < sigitFiles.length - 1 && <FileDivider />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
101
src/components/DrawPDFFields/style.module.scss
Normal file
@ -0,0 +1,101 @@
|
||||
@import '../../styles/sizes.scss';
|
||||
|
||||
.pdfFieldItem {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pdfImageWrapper {
|
||||
&.drawing {
|
||||
cursor: crosshair;
|
||||
}
|
||||
}
|
||||
|
||||
.pdfImageWrapper:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.drawingRectangle {
|
||||
position: absolute;
|
||||
outline: 1px solid #01aaad;
|
||||
z-index: 40;
|
||||
background-color: #01aaad4b;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.nonEditable {
|
||||
cursor: default;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.edited {
|
||||
outline: 1px dotted #01aaad;
|
||||
}
|
||||
|
||||
.resizeHandle {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(160, 160, 160);
|
||||
border-radius: 50%;
|
||||
cursor: nwse-resize;
|
||||
|
||||
// Increase the area a bit so it's easier to click
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -14px;
|
||||
}
|
||||
}
|
||||
|
||||
.removeHandle {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: -30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(160, 160, 160);
|
||||
border-radius: 50%;
|
||||
color: #e74c3c;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.userSelect {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: -60px;
|
||||
min-width: 193px;
|
||||
min-height: 30px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.counterpartSelectValue {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.counterpartAvatar {
|
||||
img {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
6
src/components/ExtensionFileBox.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
interface ExtensionFileBoxProps {
|
||||
extension: string
|
||||
}
|
||||
export const ExtensionFileBox = ({ extension }: ExtensionFileBoxProps) => (
|
||||
<div className="extension-file-box">This is a {extension} file</div>
|
||||
)
|
12
src/components/FileDivider.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import Divider from '@mui/material/Divider/Divider'
|
||||
|
||||
export const FileDivider = () => (
|
||||
<Divider
|
||||
sx={{
|
||||
fontSize: '12px',
|
||||
color: 'rgba(0,0,0,0.15)'
|
||||
}}
|
||||
>
|
||||
File Separator
|
||||
</Divider>
|
||||
)
|
52
src/components/FileList/index.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { CurrentUserFile } from '../../types/file.ts'
|
||||
import styles from './style.module.scss'
|
||||
import { Button } from '@mui/material'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faCheck } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
interface FileListProps {
|
||||
files: CurrentUserFile[]
|
||||
currentFile: CurrentUserFile
|
||||
setCurrentFile: (file: CurrentUserFile) => void
|
||||
handleDownload: () => void
|
||||
downloadLabel?: string
|
||||
}
|
||||
|
||||
const FileList = ({
|
||||
files,
|
||||
currentFile,
|
||||
setCurrentFile,
|
||||
handleDownload,
|
||||
downloadLabel
|
||||
}: FileListProps) => {
|
||||
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<ul className={styles.files}>
|
||||
{files.map((currentUserFile: CurrentUserFile) => (
|
||||
<li
|
||||
key={currentUserFile.id}
|
||||
className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
|
||||
onClick={() => setCurrentFile(currentUserFile)}
|
||||
>
|
||||
<div className={styles.fileNumber}>{currentUserFile.id}</div>
|
||||
<div className={styles.fileInfo}>
|
||||
<div className={styles.fileName}>{currentUserFile.file.name}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.fileVisual}>
|
||||
{currentUserFile.isHashValid && (
|
||||
<FontAwesomeIcon icon={faCheck} />
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button variant="contained" fullWidth onClick={handleDownload}>
|
||||
{downloadLabel || 'Download Files'}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileList
|
103
src/components/FileList/style.module.scss
Normal file
@ -0,0 +1,103 @@
|
||||
.filesPageContainer {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||
grid-gap: 30px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
|
||||
.files {
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
grid-gap: 15px;
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
}
|
||||
|
||||
.files::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.files::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.files::-webkit-scrollbar-thumb {
|
||||
max-width: 10px;
|
||||
border-radius: 2px;
|
||||
background-color: #4c82a3;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.fileItem {
|
||||
transition: ease 0.2s;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
padding: 5px 10px;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
min-height: 45px;
|
||||
|
||||
&.active {
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fileItem:hover {
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fileInfo {
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fileName {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
}
|
||||
|
||||
.fileNumber {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.fileVisual {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
10
src/components/FontAwesomeIconStack/index.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { PropsWithChildren } from 'react'
|
||||
|
||||
import styles from './styles.module.scss'
|
||||
|
||||
/**
|
||||
* This Component overlays FontAwesomeIcon icons on top of each other
|
||||
*/
|
||||
export const FontAwesomeIconStack = ({ children }: PropsWithChildren) => {
|
||||
return <div className={styles.iconStackContainer}>{children}</div>
|
||||
}
|
7
src/components/FontAwesomeIconStack/styles.module.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.iconStackContainer {
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
131
src/components/Footer/Footer.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
import { Box, Button, Link as LinkMui } from '@mui/material'
|
||||
import { Link } from 'react-router-dom'
|
||||
import styles from './style.module.scss'
|
||||
import { Container } from '../Container'
|
||||
import nostrImage from '../../assets/images/nostr.gif'
|
||||
import { appPublicRoutes } from '../../routes'
|
||||
import { createPortal } from 'react-dom'
|
||||
|
||||
export const Footer = () =>
|
||||
createPortal(
|
||||
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
||||
<Container
|
||||
style={{
|
||||
paddingBlock: '50px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
display={'grid'}
|
||||
sx={{
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
md: '0.5fr 2fr 0.5fr'
|
||||
},
|
||||
alignItems: {
|
||||
xs: 'center',
|
||||
md: 'start'
|
||||
}
|
||||
}}
|
||||
gap={'50px'}
|
||||
>
|
||||
<LinkMui
|
||||
sx={{
|
||||
justifySelf: {
|
||||
xs: 'center',
|
||||
md: 'start'
|
||||
}
|
||||
}}
|
||||
component={Link}
|
||||
to={'/'}
|
||||
className={styles.logo}
|
||||
>
|
||||
<img src="/logo.svg" alt="Logo" />
|
||||
</LinkMui>
|
||||
<Box
|
||||
display={'grid'}
|
||||
sx={{
|
||||
gap: '15px',
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
sm: 'repeat(2, 1fr)',
|
||||
xl: 'repeat(3, 1fr)'
|
||||
},
|
||||
borderBlock: {
|
||||
xs: 'solid 1px rgba(0, 0, 0, 0.1)',
|
||||
md: 'unset'
|
||||
},
|
||||
paddingY: {
|
||||
xs: '10px',
|
||||
md: 'unset'
|
||||
}
|
||||
}}
|
||||
component={'nav'}
|
||||
className={styles.nav}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
component={Link}
|
||||
to={'/'}
|
||||
variant={'text'}
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
<Button
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
component={LinkMui}
|
||||
href={appPublicRoutes.docs}
|
||||
target="_blank"
|
||||
variant={'text'}
|
||||
>
|
||||
Documentation
|
||||
</Button>
|
||||
<Button
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
component={LinkMui}
|
||||
href={appPublicRoutes.source}
|
||||
target="_blank"
|
||||
variant={'text'}
|
||||
>
|
||||
Source
|
||||
</Button>
|
||||
</Box>
|
||||
<Box
|
||||
className={styles.links}
|
||||
sx={{
|
||||
justifySelf: {
|
||||
xs: 'center',
|
||||
md: 'end'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
component={LinkMui}
|
||||
href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
|
||||
target="_blank"
|
||||
sx={{
|
||||
minWidth: '45px',
|
||||
padding: '10px'
|
||||
}}
|
||||
variant={'contained'}
|
||||
>
|
||||
<img src={nostrImage} width="25" alt="nostr logo" height="25" />
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
<div className={`${styles.borderTop} ${styles.credits}`}>
|
||||
Built by
|
||||
<a rel="noopener" href="https://nostrdev.com/" target="_blank">
|
||||
Nostr Dev
|
||||
</a>{' '}
|
||||
2024.
|
||||
</div>
|
||||
</footer>,
|
||||
document.getElementById('root')!
|
||||
)
|
49
src/components/Footer/style.module.scss
Normal file
@ -0,0 +1,49 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.borderTop {
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.links {
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
> a + a {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.credits {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
28
src/components/Landing/CardComponent/CardComponent.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { ReactElement } from 'react'
|
||||
|
||||
import styles from './style.module.scss'
|
||||
|
||||
interface CardComponentProps {
|
||||
icon: ReactElement
|
||||
title: ReactElement
|
||||
description: ReactElement
|
||||
actions?: ReactElement
|
||||
}
|
||||
|
||||
export const CardComponent = ({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
actions
|
||||
}: CardComponentProps) => {
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<h3 className={styles.title}>
|
||||
<div className={styles.icon}>{icon}</div>
|
||||
{title}
|
||||
</h3>
|
||||
<p className={styles.description}>{description}</p>
|
||||
{actions ? <div className={styles.actions}>{actions}</div> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
64
src/components/Landing/CardComponent/style.module.scss
Normal file
@ -0,0 +1,64 @@
|
||||
@import '../../../styles/colors.scss';
|
||||
|
||||
.card {
|
||||
border-radius: 4px;
|
||||
padding: 25px;
|
||||
|
||||
position: relative;
|
||||
background: $overlay-background-color;
|
||||
|
||||
transition: ease 0.2s;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background: $primary-main;
|
||||
|
||||
.icon,
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
transition:
|
||||
color 0s,
|
||||
background-color 0.2s;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $primary-main;
|
||||
font-size: 25px;
|
||||
line-height: 1;
|
||||
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: auto;
|
||||
text-align: right;
|
||||
}
|
@ -1,18 +1,43 @@
|
||||
import { createPortal } from 'react-dom'
|
||||
import styles from './style.module.scss'
|
||||
import { PropsWithChildren } from 'react'
|
||||
|
||||
interface Props {
|
||||
desc: string
|
||||
desc?: string
|
||||
variant?: 'small' | 'default'
|
||||
}
|
||||
|
||||
export const LoadingSpinner = (props: Props) => {
|
||||
const { desc } = props
|
||||
export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
|
||||
const { desc, children, variant = 'default' } = props
|
||||
|
||||
return (
|
||||
<div className={styles.loadingSpinnerOverlay}>
|
||||
<div className={styles.loadingSpinnerContainer}>
|
||||
<div className={styles.loadingSpinner}></div>
|
||||
{desc && <span>{desc}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
switch (variant) {
|
||||
case 'small':
|
||||
return (
|
||||
<div
|
||||
className={`${styles.loadingSpinnerContainer}`}
|
||||
data-variant={variant}
|
||||
>
|
||||
<div className={styles.loadingSpinner}></div>
|
||||
</div>
|
||||
)
|
||||
|
||||
default:
|
||||
return createPortal(
|
||||
<div className={styles.loadingSpinnerOverlay}>
|
||||
<div
|
||||
className={styles.loadingSpinnerContainer}
|
||||
data-variant={variant}
|
||||
>
|
||||
<div className={styles.loadingSpinner}></div>
|
||||
{desc && (
|
||||
<div className={styles.loadingSpinnerDesc}>
|
||||
{desc}
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
document.getElementById('root')!
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -1,30 +1,57 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.loadingSpinnerOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
z-index: 50;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.loadingSpinnerContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loadingSpinnerContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.loadingSpinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
&[data-variant='default'] {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 25px 20px;
|
||||
background: $overlay-background-color;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
&[data-variant='small'] {
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.loadingSpinner {
|
||||
background: url('/favicon.png') no-repeat center / cover;
|
||||
margin: 40px 25px;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.loadingSpinnerDesc {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
127
src/components/MarkFormField/index.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
import { CurrentUserMark } from '../../types/mark.ts'
|
||||
import styles from './style.module.scss'
|
||||
import {
|
||||
findNextIncompleteCurrentUserMark,
|
||||
getToolboxLabelByMarkType,
|
||||
isCurrentUserMarksComplete,
|
||||
isCurrentValueLast
|
||||
} from '../../utils'
|
||||
import React, { useState } from 'react'
|
||||
import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
|
||||
|
||||
interface MarkFormFieldProps {
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
|
||||
handleSelectedMarkValueChange: (value: string) => void
|
||||
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
|
||||
selectedMark: CurrentUserMark
|
||||
selectedMarkValue: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for rendering a form field connected to a mark and keeping track of its value.
|
||||
*/
|
||||
const MarkFormField = ({
|
||||
handleSubmit,
|
||||
handleSelectedMarkValueChange,
|
||||
selectedMark,
|
||||
selectedMarkValue,
|
||||
currentUserMarks,
|
||||
handleCurrentUserMarkChange
|
||||
}: MarkFormFieldProps) => {
|
||||
const [displayActions, setDisplayActions] = useState(true)
|
||||
const isReadyToSign = () =>
|
||||
isCurrentUserMarksComplete(currentUserMarks) ||
|
||||
isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
|
||||
const isCurrent = (currentMark: CurrentUserMark) =>
|
||||
currentMark.id === selectedMark.id
|
||||
const isDone = (currentMark: CurrentUserMark) =>
|
||||
isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
|
||||
const findNext = () => {
|
||||
return (
|
||||
currentUserMarks[selectedMark.id] ||
|
||||
findNextIncompleteCurrentUserMark(currentUserMarks)
|
||||
)
|
||||
}
|
||||
const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
console.log('handle form submit runs...')
|
||||
return isReadyToSign()
|
||||
? handleSubmit(event)
|
||||
: handleCurrentUserMarkChange(findNext()!)
|
||||
}
|
||||
const toggleActions = () => setDisplayActions(!displayActions)
|
||||
const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
|
||||
const { input: MarkInputComponent } =
|
||||
MARK_TYPE_CONFIG[selectedMark.mark.type] || {}
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.trigger}>
|
||||
<button
|
||||
onClick={toggleActions}
|
||||
className={styles.triggerBtn}
|
||||
type="button"
|
||||
title="Toggle"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-64 0 512 512"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
transform={displayActions ? 'rotate(180)' : 'rotate(0)'}
|
||||
>
|
||||
<path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className={`${styles.actions} ${displayActions && styles.expanded}`}>
|
||||
<div className={styles.actionsWrapper}>
|
||||
<div className={styles.actionsTop}>
|
||||
<div className={styles.actionsTopInfo}>
|
||||
<p className={styles.actionsTopInfoText}>Add {markLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.inputWrapper}>
|
||||
<form onSubmit={(e) => handleFormSubmit(e)}>
|
||||
{typeof MarkInputComponent !== 'undefined' && (
|
||||
<MarkInputComponent
|
||||
value={selectedMarkValue}
|
||||
placeholder={markLabel}
|
||||
handler={handleSelectedMarkValueChange}
|
||||
userMark={selectedMark}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.actionsBottom}>
|
||||
<button type="submit" className={styles.submitButton}>
|
||||
NEXT
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className={styles.footerContainer}>
|
||||
<div className={styles.footer}>
|
||||
{currentUserMarks.map((mark, index) => {
|
||||
return (
|
||||
<div className={styles.pagination} key={index}>
|
||||
<button
|
||||
className={`${styles.paginationButton} ${isDone(mark) && styles.paginationButtonDone}`}
|
||||
onClick={() => handleCurrentUserMarkChange(mark)}
|
||||
>
|
||||
{mark.id}
|
||||
</button>
|
||||
{isCurrent(mark) && (
|
||||
<div className={styles.paginationButtonCurrent}></div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarkFormField
|
218
src/components/MarkFormField/style.module.scss
Normal file
@ -0,0 +1,218 @@
|
||||
@import '../../styles/sizes.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
bottom: $tabs-height + 5px;
|
||||
right: 5px;
|
||||
left: 5px;
|
||||
|
||||
align-items: center;
|
||||
z-index: 40;
|
||||
|
||||
button {
|
||||
transition: ease 0.2s;
|
||||
width: auto;
|
||||
border-radius: 4px;
|
||||
outline: unset;
|
||||
border: unset;
|
||||
background: unset;
|
||||
color: #ffffff;
|
||||
background: #4c82a3;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: unset;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #5e8eab;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background: #447592;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.actionButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.actionsBottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.paginationButton {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.paginationButton:hover {
|
||||
background: #447592;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.paginationButtonDone {
|
||||
background: #5e8eab;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.paginationButtonCurrent {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #4c82a3;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.triggerBtn {
|
||||
background: white;
|
||||
color: #434343;
|
||||
padding: 5px 30px;
|
||||
box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
background: white;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-gap: 15px;
|
||||
box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
|
||||
max-width: 750px;
|
||||
|
||||
&.expanded {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.actionsWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 20px;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actionsTop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actionsTopInfo {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.actionsTopInfoText {
|
||||
font-size: 16px;
|
||||
color: #434343;
|
||||
}
|
||||
|
||||
.actionsTrigger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.textInput {
|
||||
height: 100px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
border: solid 2px #4c82a3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-radius: 4px;
|
||||
border: solid 1px rgba(0, 0, 0, 0.15);
|
||||
padding: 5px 10px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%),
|
||||
linear-gradient(white, white);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border: solid 1px rgba(0, 0, 0, 0.15);
|
||||
outline: none;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 100%),
|
||||
linear-gradient(white, white);
|
||||
}
|
||||
|
||||
.footerContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 5px;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 5px;
|
||||
}
|
44
src/components/MarkInputs/Signature.module.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
$padding: 5px;
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
outline: 1px solid black;
|
||||
background-color: $body-background-color;
|
||||
cursor: crosshair;
|
||||
|
||||
// Disable panning/zooming when touching canvas element
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reset {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $padding;
|
||||
color: $primary-main;
|
||||
|
||||
&:hover {
|
||||
color: $primary-dark;
|
||||
}
|
||||
}
|
101
src/components/MarkInputs/Signature.tsx
Normal file
@ -0,0 +1,101 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import { MarkInputProps } from '../../types/mark'
|
||||
import { getOptimizedPaths, optimizeSVG } from '../../utils'
|
||||
import { faEraser } from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import styles from './Signature.module.scss'
|
||||
import { MarkRenderSignature } from '../MarkRender/Signature'
|
||||
|
||||
export const MarkInputSignature = ({
|
||||
value,
|
||||
handler,
|
||||
userMark
|
||||
}: MarkInputProps) => {
|
||||
const location = userMark?.mark.location
|
||||
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const [drawing, setDrawing] = useState(false)
|
||||
const [paths, setPaths] = useState<string[]>(value ? JSON.parse(value) : [])
|
||||
|
||||
function update() {
|
||||
if (location && paths) {
|
||||
if (paths.length) {
|
||||
const optimizedSvg = optimizeSVG(location, paths)
|
||||
const extractedPaths = getOptimizedPaths(optimizedSvg)
|
||||
handler(JSON.stringify(extractedPaths))
|
||||
} else {
|
||||
handler('')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handlePointerDown = (event: React.PointerEvent) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect()
|
||||
const x = event.clientX - rect.left
|
||||
const y = event.clientY - rect.top
|
||||
|
||||
const ctx = canvasRef.current?.getContext('2d')
|
||||
ctx?.beginPath()
|
||||
ctx?.moveTo(x, y)
|
||||
setPaths([...paths, `M ${x} ${y}`])
|
||||
setDrawing(true)
|
||||
}
|
||||
const handlePointerUp = () => {
|
||||
setDrawing(false)
|
||||
update()
|
||||
const ctx = canvasRef.current?.getContext('2d')
|
||||
ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
|
||||
}
|
||||
const handlePointerMove = (event: React.PointerEvent) => {
|
||||
if (!drawing) return
|
||||
const ctx = canvasRef.current?.getContext('2d')
|
||||
const rect = canvasRef.current?.getBoundingClientRect()
|
||||
const x = event.clientX - rect!.left
|
||||
const y = event.clientY - rect!.top
|
||||
|
||||
ctx?.lineTo(x, y)
|
||||
ctx?.stroke()
|
||||
|
||||
// Collect the path data
|
||||
setPaths((prevPaths) => {
|
||||
const newPaths = [...prevPaths]
|
||||
newPaths[newPaths.length - 1] += ` L ${x} ${y}`
|
||||
return newPaths
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setPaths([])
|
||||
setDrawing(false)
|
||||
update()
|
||||
const ctx = canvasRef.current?.getContext('2d')
|
||||
ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.relative}>
|
||||
<canvas
|
||||
height={location?.height}
|
||||
width={location?.width}
|
||||
ref={canvasRef}
|
||||
className={styles.canvas}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerOut={handlePointerUp}
|
||||
></canvas>
|
||||
{typeof userMark?.mark !== 'undefined' && (
|
||||
<div className={styles.absolute}>
|
||||
<MarkRenderSignature value={value} mark={userMark.mark} />
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.reset}>
|
||||
<FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
19
src/components/MarkInputs/Text.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { MarkInputProps } from '../../types/mark'
|
||||
import styles from '../MarkFormField/style.module.scss'
|
||||
|
||||
export const MarkInputText = ({
|
||||
value,
|
||||
handler,
|
||||
placeholder
|
||||
}: MarkInputProps) => {
|
||||
return (
|
||||
<input
|
||||
className={styles.input}
|
||||
placeholder={placeholder}
|
||||
onChange={(e) => {
|
||||
handler(e.currentTarget.value)
|
||||
}}
|
||||
value={value}
|
||||
/>
|
||||
)
|
||||
}
|
13
src/components/MarkRender/Signature.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { MarkRenderProps } from '../../types/mark'
|
||||
|
||||
export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => {
|
||||
const paths = value ? JSON.parse(value) : []
|
||||
|
||||
return (
|
||||
<svg viewBox={`0 0 ${mark.location.width} ${mark.location.height}`}>
|
||||
{paths.map((path: string) => (
|
||||
<path d={path} stroke="black" fill="none" />
|
||||
))}
|
||||
</svg>
|
||||
)
|
||||
}
|
58
src/components/PDFView/PdfItem.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||
import { SigitFile } from '../../utils/file.ts'
|
||||
import { ExtensionFileBox } from '../ExtensionFileBox.tsx'
|
||||
import PdfPageItem from './PdfPageItem.tsx'
|
||||
|
||||
interface PdfItemProps {
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
handleMarkClick: (id: number) => void
|
||||
otherUserMarks: Mark[]
|
||||
file: SigitFile
|
||||
selectedMark: CurrentUserMark | null
|
||||
selectedMarkValue: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for displaying pages of a single Pdf File.
|
||||
*/
|
||||
const PdfItem = ({
|
||||
file,
|
||||
currentUserMarks,
|
||||
handleMarkClick,
|
||||
selectedMarkValue,
|
||||
selectedMark,
|
||||
otherUserMarks
|
||||
}: PdfItemProps) => {
|
||||
const filterByPage = (
|
||||
marks: CurrentUserMark[],
|
||||
page: number
|
||||
): CurrentUserMark[] => {
|
||||
return marks.filter((m) => m.mark.location.page === page)
|
||||
}
|
||||
const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
|
||||
return marks.filter((mark) => mark.location.page === page)
|
||||
}
|
||||
if (file.isPdf) {
|
||||
return file.pages?.map((page, i) => {
|
||||
return (
|
||||
<PdfPageItem
|
||||
fileName={file.name}
|
||||
pageIndex={i}
|
||||
page={page}
|
||||
key={i}
|
||||
currentUserMarks={filterByPage(currentUserMarks, i)}
|
||||
handleMarkClick={handleMarkClick}
|
||||
selectedMarkValue={selectedMarkValue}
|
||||
selectedMark={selectedMark}
|
||||
otherUserMarks={filterMarksByPage(otherUserMarks, i)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
} else if (file.isImage) {
|
||||
return <img className="file-image" src={file.objectUrl} alt={file.name} />
|
||||
} else {
|
||||
return <ExtensionFileBox extension={file.extension} />
|
||||
}
|
||||
}
|
||||
|
||||
export default PdfItem
|
61
src/components/PDFView/PdfMarkItem.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import { CurrentUserMark } from '../../types/mark.ts'
|
||||
import styles from '../DrawPDFFields/style.module.scss'
|
||||
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
|
||||
import { useScale } from '../../hooks/useScale.tsx'
|
||||
import { forwardRef } from 'react'
|
||||
import { npubToHex } from '../../utils/nostr.ts'
|
||||
import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
|
||||
|
||||
interface PdfMarkItemProps {
|
||||
userMark: CurrentUserMark
|
||||
handleMarkClick: (id: number) => void
|
||||
selectedMarkValue: string
|
||||
selectedMark: CurrentUserMark | null
|
||||
pageWidth: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for display an individual Pdf Mark.
|
||||
*/
|
||||
const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
|
||||
(
|
||||
{ selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
|
||||
ref
|
||||
) => {
|
||||
const { location } = userMark.mark
|
||||
const handleClick = () => handleMarkClick(userMark.mark.id)
|
||||
const isEdited = () => selectedMark?.mark.id === userMark.mark.id
|
||||
const getMarkValue = () =>
|
||||
isEdited() ? selectedMarkValue : userMark.currentValue
|
||||
const { from } = useScale()
|
||||
const { render: MarkRenderComponent } =
|
||||
MARK_TYPE_CONFIG[userMark.mark.type] || {}
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
onClick={handleClick}
|
||||
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
|
||||
style={{
|
||||
backgroundColor: selectedMark?.mark.npub
|
||||
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
|
||||
: undefined,
|
||||
outlineColor: selectedMark?.mark.npub
|
||||
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
|
||||
: undefined,
|
||||
left: inPx(from(pageWidth, location.left)),
|
||||
top: inPx(from(pageWidth, location.top)),
|
||||
width: inPx(from(pageWidth, location.width)),
|
||||
height: inPx(from(pageWidth, location.height)),
|
||||
fontFamily: FONT_TYPE,
|
||||
fontSize: inPx(from(pageWidth, FONT_SIZE))
|
||||
}}
|
||||
>
|
||||
{typeof MarkRenderComponent !== 'undefined' && (
|
||||
<MarkRenderComponent value={getMarkValue()} mark={userMark.mark} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default PdfMarkItem
|
170
src/components/PDFView/PdfMarking.tsx
Normal file
@ -0,0 +1,170 @@
|
||||
import PdfView from './index.tsx'
|
||||
import MarkFormField from '../MarkFormField'
|
||||
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import {
|
||||
findNextIncompleteCurrentUserMark,
|
||||
getUpdatedMark,
|
||||
updateCurrentUserMarks
|
||||
} from '../../utils'
|
||||
import { EMPTY } from '../../utils/const.ts'
|
||||
import { Container } from '../Container'
|
||||
import signPageStyles from '../../pages/sign/style.module.scss'
|
||||
import { CurrentUserFile } from '../../types/file.ts'
|
||||
import FileList from '../FileList'
|
||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||
import { UsersDetails } from '../UsersDetails.tsx'
|
||||
import { Meta } from '../../types'
|
||||
import {
|
||||
faCircleInfo,
|
||||
faFileDownload,
|
||||
faPen
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
interface PdfMarkingProps {
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
files: CurrentUserFile[]
|
||||
handleDownload: () => void
|
||||
meta: Meta | null
|
||||
otherUserMarks: Mark[]
|
||||
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
|
||||
setIsMarksCompleted: (isMarksCompleted: boolean) => void
|
||||
setUpdatedMarks: (markToUpdate: Mark) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Top-level component responsible for displaying Pdfs, Pages, and Marks,
|
||||
* as well as tracking if the document is ready to be signed.
|
||||
* @param props
|
||||
* @constructor
|
||||
*/
|
||||
const PdfMarking = (props: PdfMarkingProps) => {
|
||||
const {
|
||||
files,
|
||||
currentUserMarks,
|
||||
setIsMarksCompleted,
|
||||
setCurrentUserMarks,
|
||||
setUpdatedMarks,
|
||||
handleDownload,
|
||||
meta,
|
||||
otherUserMarks
|
||||
} = props
|
||||
const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
|
||||
const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
|
||||
const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedMark === null && currentUserMarks.length > 0) {
|
||||
setSelectedMark(
|
||||
findNextIncompleteCurrentUserMark(currentUserMarks) ||
|
||||
currentUserMarks[0]
|
||||
)
|
||||
}
|
||||
}, [currentUserMarks, selectedMark])
|
||||
|
||||
useEffect(() => {
|
||||
if (currentFile === null && files.length > 0) {
|
||||
setCurrentFile(files[0])
|
||||
}
|
||||
}, [files, currentFile])
|
||||
|
||||
const handleMarkClick = (id: number) => {
|
||||
const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
|
||||
setSelectedMark(nextMark!)
|
||||
setSelectedMarkValue(nextMark?.mark.value ?? EMPTY)
|
||||
}
|
||||
|
||||
const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
|
||||
if (!selectedMark) return
|
||||
const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
|
||||
selectedMark,
|
||||
selectedMarkValue
|
||||
)
|
||||
|
||||
const updatedCurrentUserMarks = updateCurrentUserMarks(
|
||||
currentUserMarks,
|
||||
updatedSelectedMark
|
||||
)
|
||||
setCurrentUserMarks(updatedCurrentUserMarks)
|
||||
setSelectedMarkValue(mark.currentValue ?? EMPTY)
|
||||
setSelectedMark(mark)
|
||||
}
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
if (!selectedMarkValue || !selectedMark) return
|
||||
|
||||
const updatedMark: CurrentUserMark = getUpdatedMark(
|
||||
selectedMark,
|
||||
selectedMarkValue
|
||||
)
|
||||
|
||||
setSelectedMarkValue(EMPTY)
|
||||
const updatedCurrentUserMarks = updateCurrentUserMarks(
|
||||
currentUserMarks,
|
||||
updatedMark
|
||||
)
|
||||
setCurrentUserMarks(updatedCurrentUserMarks)
|
||||
setSelectedMark(null)
|
||||
setIsMarksCompleted(true)
|
||||
setUpdatedMarks(updatedMark.mark)
|
||||
}
|
||||
|
||||
// const updateCurrentUserMarkValues = () => {
|
||||
// const updatedMark: CurrentUserMark = getUpdatedMark(selectedMark!, selectedMarkValue)
|
||||
// const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark)
|
||||
// setSelectedMarkValue(EMPTY)
|
||||
// setCurrentUserMarks(updatedCurrentUserMarks)
|
||||
// }
|
||||
|
||||
const handleChange = (value: string) => setSelectedMarkValue(value)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container className={signPageStyles.container}>
|
||||
<StickySideColumns
|
||||
left={
|
||||
<div>
|
||||
{currentFile !== null && (
|
||||
<FileList
|
||||
files={files}
|
||||
currentFile={currentFile}
|
||||
setCurrentFile={setCurrentFile}
|
||||
handleDownload={handleDownload}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
right={meta !== null && <UsersDetails meta={meta} />}
|
||||
leftIcon={faFileDownload}
|
||||
centerIcon={faPen}
|
||||
rightIcon={faCircleInfo}
|
||||
>
|
||||
{currentUserMarks?.length > 0 && (
|
||||
<PdfView
|
||||
currentFile={currentFile}
|
||||
files={files}
|
||||
handleMarkClick={handleMarkClick}
|
||||
selectedMarkValue={selectedMarkValue}
|
||||
selectedMark={selectedMark}
|
||||
currentUserMarks={currentUserMarks}
|
||||
otherUserMarks={otherUserMarks}
|
||||
/>
|
||||
)}
|
||||
</StickySideColumns>
|
||||
{selectedMark !== null && (
|
||||
<MarkFormField
|
||||
handleSubmit={handleSubmit}
|
||||
handleSelectedMarkValueChange={handleChange}
|
||||
selectedMark={selectedMark}
|
||||
selectedMarkValue={selectedMarkValue}
|
||||
currentUserMarks={currentUserMarks}
|
||||
handleCurrentUserMarkChange={handleCurrentUserMarkChange}
|
||||
/>
|
||||
)}
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PdfMarking
|
84
src/components/PDFView/PdfPageItem.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import styles from '../DrawPDFFields/style.module.scss'
|
||||
import { PdfPage } from '../../types/drawing.ts'
|
||||
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||
import PdfMarkItem from './PdfMarkItem.tsx'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import pdfViewStyles from './style.module.scss'
|
||||
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
|
||||
import { useScale } from '../../hooks/useScale.tsx'
|
||||
interface PdfPageProps {
|
||||
fileName: string
|
||||
pageIndex: number
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
handleMarkClick: (id: number) => void
|
||||
otherUserMarks: Mark[]
|
||||
page: PdfPage
|
||||
selectedMark: CurrentUserMark | null
|
||||
selectedMarkValue: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for rendering a single Pdf Page and its Marks
|
||||
*/
|
||||
const PdfPageItem = ({
|
||||
fileName,
|
||||
pageIndex,
|
||||
page,
|
||||
currentUserMarks,
|
||||
handleMarkClick,
|
||||
selectedMarkValue,
|
||||
selectedMark,
|
||||
otherUserMarks
|
||||
}: PdfPageProps) => {
|
||||
useEffect(() => {
|
||||
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
||||
markRefs.current[selectedMark.id]?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
})
|
||||
}
|
||||
}, [selectedMark])
|
||||
const markRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||
const { from } = useScale()
|
||||
|
||||
return (
|
||||
<div className={`image-wrapper ${styles.pdfImageWrapper}`}>
|
||||
<img
|
||||
draggable="false"
|
||||
src={page.image}
|
||||
alt={`page ${pageIndex + 1} of ${fileName}`}
|
||||
/>
|
||||
{currentUserMarks.map((m, i) => (
|
||||
<PdfMarkItem
|
||||
key={i}
|
||||
ref={(el) => (markRefs.current[m.id] = el)}
|
||||
handleMarkClick={handleMarkClick}
|
||||
selectedMarkValue={selectedMarkValue}
|
||||
userMark={m}
|
||||
selectedMark={selectedMark}
|
||||
pageWidth={page.width}
|
||||
/>
|
||||
))}
|
||||
{otherUserMarks.map((m, i) => {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={pdfViewStyles.otherUserMarksDisplay}
|
||||
style={{
|
||||
left: inPx(from(page.width, m.location.left)),
|
||||
top: inPx(from(page.width, m.location.top)),
|
||||
width: inPx(from(page.width, m.location.width)),
|
||||
height: inPx(from(page.width, m.location.height)),
|
||||
fontFamily: FONT_TYPE,
|
||||
fontSize: inPx(from(page.width, FONT_SIZE))
|
||||
}}
|
||||
>
|
||||
{m.value}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PdfPageItem
|
84
src/components/PDFView/index.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import PdfItem from './PdfItem.tsx'
|
||||
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||
import { CurrentUserFile } from '../../types/file.ts'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { FileDivider } from '../FileDivider.tsx'
|
||||
import React from 'react'
|
||||
import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
|
||||
|
||||
interface PdfViewProps {
|
||||
currentFile: CurrentUserFile | null
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
files: CurrentUserFile[]
|
||||
handleMarkClick: (id: number) => void
|
||||
otherUserMarks: Mark[]
|
||||
selectedMark: CurrentUserMark | null
|
||||
selectedMarkValue: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for rendering Pdf files.
|
||||
*/
|
||||
const PdfView = ({
|
||||
files,
|
||||
currentUserMarks,
|
||||
handleMarkClick,
|
||||
selectedMarkValue,
|
||||
selectedMark,
|
||||
currentFile,
|
||||
otherUserMarks
|
||||
}: PdfViewProps) => {
|
||||
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||
useEffect(() => {
|
||||
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
||||
pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
}, [currentFile])
|
||||
const filterByFile = (
|
||||
currentUserMarks: CurrentUserMark[],
|
||||
hash: string
|
||||
): CurrentUserMark[] => {
|
||||
return currentUserMarks.filter(
|
||||
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
|
||||
)
|
||||
}
|
||||
const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
|
||||
return marks.filter((mark) => mark.pdfFileHash === hash)
|
||||
}
|
||||
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
||||
index !== files.length - 1
|
||||
return (
|
||||
<div className="files-wrapper">
|
||||
{files.length > 0 ? (
|
||||
files.map((currentUserFile, index, arr) => {
|
||||
const { hash, file, id } = currentUserFile
|
||||
|
||||
if (!hash) return
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<div
|
||||
id={file.name}
|
||||
className="file-wrapper"
|
||||
ref={(el) => (pdfRefs.current[id] = el)}
|
||||
>
|
||||
<PdfItem
|
||||
file={file}
|
||||
currentUserMarks={filterByFile(currentUserMarks, hash)}
|
||||
selectedMark={selectedMark}
|
||||
handleMarkClick={handleMarkClick}
|
||||
selectedMarkValue={selectedMarkValue}
|
||||
otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
|
||||
/>
|
||||
</div>
|
||||
{isNotLastPdfFile(index, arr) && <FileDivider />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<LoadingSpinner variant="small" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PdfView
|
13
src/components/PDFView/style.module.scss
Normal file
@ -0,0 +1,13 @@
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.otherUserMarksDisplay {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
113
src/components/Select/index.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
import {
|
||||
FormControl,
|
||||
MenuItem,
|
||||
Select as SelectMui,
|
||||
SelectChangeEvent,
|
||||
styled,
|
||||
SelectProps as SelectMuiProps,
|
||||
MenuItemProps
|
||||
} from '@mui/material'
|
||||
|
||||
const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
|
||||
backgroundColor: 'var(--primary-main)',
|
||||
fontSize: '14px',
|
||||
fontWeight: '500',
|
||||
color: 'white',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--primary-light)'
|
||||
},
|
||||
'& .MuiSelect-select:focus': {
|
||||
backgroundColor: 'var(--primary-light)'
|
||||
},
|
||||
'& .MuiSvgIcon-root': {
|
||||
color: 'white'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: 'none'
|
||||
}
|
||||
}))
|
||||
|
||||
const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
|
||||
marginInline: '5px',
|
||||
borderRadius: '4px',
|
||||
'&:hover': {
|
||||
background: 'var(--primary-light)',
|
||||
color: 'white'
|
||||
},
|
||||
'&.Mui-selected': {
|
||||
background: 'var(--primary-dark)',
|
||||
color: 'white'
|
||||
},
|
||||
'&.Mui-selected:hover': {
|
||||
background: 'var(--primary-light)'
|
||||
},
|
||||
'&.Mui-selected.Mui-focusVisible': {
|
||||
background: 'var(--primary-light)',
|
||||
color: 'white'
|
||||
},
|
||||
'&.Mui-focusVisible': {
|
||||
background: 'var(--primary-light)',
|
||||
color: 'white'
|
||||
},
|
||||
'& + *': {
|
||||
marginTop: '5px'
|
||||
}
|
||||
}))
|
||||
|
||||
interface SelectItemProps<T extends string> {
|
||||
value: T
|
||||
label: string
|
||||
}
|
||||
|
||||
interface SelectProps<T extends string> {
|
||||
value: T
|
||||
setValue: React.Dispatch<React.SetStateAction<T>>
|
||||
options: SelectItemProps<T>[]
|
||||
name?: string
|
||||
id?: string
|
||||
}
|
||||
|
||||
export function Select<T extends string>({
|
||||
value,
|
||||
setValue,
|
||||
options,
|
||||
name,
|
||||
id
|
||||
}: SelectProps<T>) {
|
||||
const handleChange = (event: SelectChangeEvent<unknown>) => {
|
||||
setValue(event.target.value as T)
|
||||
}
|
||||
|
||||
return (
|
||||
<FormControl>
|
||||
<SelectCustomized
|
||||
id={id}
|
||||
name={name}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
MenuProps={{
|
||||
MenuListProps: {
|
||||
sx: {
|
||||
paddingBlock: '5px'
|
||||
}
|
||||
},
|
||||
PaperProps: {
|
||||
sx: {
|
||||
boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{options.map((o) => {
|
||||
return (
|
||||
<MenuItemCustomized key={o.label} value={o.value as string}>
|
||||
{o.label}
|
||||
</MenuItemCustomized>
|
||||
)
|
||||
})}
|
||||
</SelectCustomized>
|
||||
</FormControl>
|
||||
)
|
||||
}
|
6
src/components/Spinner/index.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import { PropsWithChildren } from 'react'
|
||||
import styles from './style.module.scss'
|
||||
|
||||
export const Spinner = ({ children }: PropsWithChildren) => (
|
||||
<div className={styles.spin}>{children}</div>
|
||||
)
|
12
src/components/Spinner/style.module.scss
Normal file
@ -0,0 +1,12 @@
|
||||
.spin {
|
||||
animation: spin 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
16
src/components/TooltipChild.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { forwardRef, PropsWithChildren } from 'react'
|
||||
|
||||
/**
|
||||
* Helper wrapper for custom child components when using `@mui/material/tooltips`.
|
||||
* Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
|
||||
* @source https://mui.com/material-ui/react-tooltip/#custom-child-element
|
||||
*/
|
||||
export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
|
||||
({ children, ...rest }, ref) => {
|
||||
return (
|
||||
<span ref={ref} {...rest}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
)
|
58
src/components/UserAvatar/index.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { getProfileRoute } from '../../routes'
|
||||
|
||||
import styles from './styles.module.scss'
|
||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useProfileMetadata } from '../../hooks/useProfileMetadata'
|
||||
import { Tooltip } from '@mui/material'
|
||||
import { getProfileUsername } from '../../utils'
|
||||
import { TooltipChild } from '../TooltipChild'
|
||||
|
||||
interface UserAvatarProps {
|
||||
pubkey: string
|
||||
isNameVisible?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* This component will be used for the displaying username and profile picture.
|
||||
* Clicking will navigate to the user's profile.
|
||||
*/
|
||||
export const UserAvatar = ({
|
||||
pubkey,
|
||||
isNameVisible = false
|
||||
}: UserAvatarProps) => {
|
||||
const profile = useProfileMetadata(pubkey)
|
||||
const name = getProfileUsername(pubkey, profile)
|
||||
const image = profile?.picture
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={getProfileRoute(pubkey)}
|
||||
className={styles.container}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Tooltip
|
||||
key={pubkey}
|
||||
title={name}
|
||||
placement="top"
|
||||
arrow
|
||||
disableInteractive
|
||||
>
|
||||
<TooltipChild>
|
||||
<AvatarIconButton
|
||||
src={image}
|
||||
hexKey={pubkey}
|
||||
aria-label={`account of user ${name}`}
|
||||
color="inherit"
|
||||
sx={{
|
||||
padding: 0
|
||||
}}
|
||||
/>
|
||||
</TooltipChild>
|
||||
</Tooltip>
|
||||
{isNameVisible && name ? (
|
||||
<span className={styles.username}>{name}</span>
|
||||
) : null}
|
||||
</Link>
|
||||
)
|
||||
}
|
17
src/components/UserAvatar/styles.module.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
// flex-grow: 1;
|
||||
}
|
||||
|
||||
.username {
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
38
src/components/UserAvatarGroup/index.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { Children, PropsWithChildren } from 'react'
|
||||
|
||||
import styles from './style.module.scss'
|
||||
|
||||
interface UserAvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
max: number
|
||||
renderSurplus?: ((surplus: number) => React.ReactNode) | undefined
|
||||
}
|
||||
|
||||
const defaultSurplus = (surplus: number) => {
|
||||
return <span className={styles.icon}>+{surplus}</span>
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders children with the `max` limit (including surplus if available).
|
||||
* The children are wrapped with a `div` (accepts standard `HTMLDivElement` attributes)
|
||||
* @param max The maximum number of children rendered in a div.
|
||||
* @param renderSurplus Custom render for surplus children (accepts surplus number).
|
||||
*/
|
||||
export const UserAvatarGroup = ({
|
||||
max,
|
||||
renderSurplus = defaultSurplus,
|
||||
children,
|
||||
...rest
|
||||
}: PropsWithChildren<UserAvatarGroupProps>) => {
|
||||
const total = Children.count(children)
|
||||
const surplus = total - max + 1
|
||||
|
||||
const childrenArray = Children.toArray(children)
|
||||
return (
|
||||
<div className={styles.container} {...rest}>
|
||||
{surplus > 1
|
||||
? childrenArray.slice(0, surplus * -1).map((c) => c)
|
||||
: children}
|
||||
{surplus > 1 && renderSurplus(surplus)}
|
||||
</div>
|
||||
)
|
||||
}
|
39
src/components/UserAvatarGroup/style.module.scss
Normal file
@ -0,0 +1,39 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.container {
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
> * {
|
||||
transition: margin ease 0.2s;
|
||||
margin: 0 0 0 -10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:first-child {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
> *:hover,
|
||||
> *:focus-within {
|
||||
margin: 0 15px 0 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border-width: 2px;
|
||||
overflow: hidden;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: white;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
border: solid 2px $primary-main;
|
||||
}
|
32
src/components/UserAvatarIconButton/index.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { IconButton, IconButtonProps } from '@mui/material'
|
||||
import styles from './style.module.scss'
|
||||
import { getRoboHashPicture } from '../../utils'
|
||||
|
||||
interface AvatarIconButtonProps extends IconButtonProps {
|
||||
src: string | undefined
|
||||
hexKey: string | undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* This component displays profile image inside IconButton
|
||||
* @param {string | undefined} props.src - image source or robohash picture
|
||||
* @param {string | undefined} props.hexKey - robohash and affects border
|
||||
* @param {IconButtonProps} props - component extends mui's IconButton
|
||||
*/
|
||||
export const AvatarIconButton = (props: AvatarIconButtonProps) => {
|
||||
const { src, hexKey, ...rest } = props
|
||||
|
||||
return (
|
||||
<IconButton {...rest}>
|
||||
<img
|
||||
src={src || getRoboHashPicture(hexKey)}
|
||||
alt="user image"
|
||||
className={`${styles.icon}`}
|
||||
style={{
|
||||
borderStyle: hexKey ? 'solid' : 'none',
|
||||
borderColor: `#${hexKey?.substring(0, 6)}`
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
7
src/components/UserAvatarIconButton/style.module.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border-width: 2px;
|
||||
overflow: hidden;
|
||||
}
|
276
src/components/UsersDetails.tsx/index.tsx
Normal file
@ -0,0 +1,276 @@
|
||||
import { Divider, Tooltip } from '@mui/material'
|
||||
import {
|
||||
formatTimestamp,
|
||||
fromUnixTimestamp,
|
||||
hexToNpub,
|
||||
npubToHex,
|
||||
SigitStatus,
|
||||
SignStatus
|
||||
} from '../../utils'
|
||||
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
||||
import { UserAvatarGroup } from '../UserAvatarGroup'
|
||||
|
||||
import styles from './style.module.scss'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import {
|
||||
faCalendar,
|
||||
faCalendarCheck,
|
||||
faCalendarPlus,
|
||||
faCheck,
|
||||
faClock,
|
||||
faEye,
|
||||
faFile,
|
||||
faFileCircleExclamation
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
||||
import { useAppSelector } from '../../hooks/store'
|
||||
import { DisplaySigner } from '../DisplaySigner'
|
||||
import { Meta, OpenTimestamp } from '../../types'
|
||||
import { extractFileExtensions } from '../../utils/file'
|
||||
import { UserAvatar } from '../UserAvatar'
|
||||
|
||||
interface UsersDetailsProps {
|
||||
meta: Meta
|
||||
}
|
||||
|
||||
export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
const {
|
||||
submittedBy,
|
||||
exportedBy,
|
||||
signers,
|
||||
viewers,
|
||||
fileHashes,
|
||||
signersStatus,
|
||||
createdAt,
|
||||
completedAt,
|
||||
parsedSignatureEvents,
|
||||
signedStatus,
|
||||
isValid,
|
||||
id,
|
||||
timestamps
|
||||
} = useSigitMeta(meta)
|
||||
const { usersPubkey } = useAppSelector((state) => state.auth)
|
||||
const userCanSign =
|
||||
typeof usersPubkey !== 'undefined' &&
|
||||
signers.includes(hexToNpub(usersPubkey))
|
||||
|
||||
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
|
||||
|
||||
const isTimestampVerified = (
|
||||
timestamps: OpenTimestamp[],
|
||||
nostrId: string
|
||||
): boolean => {
|
||||
const matched = timestamps.find((t) => t.nostrId === nostrId)
|
||||
return !!(matched && matched.verification)
|
||||
}
|
||||
|
||||
const getOpenTimestampsInfo = (
|
||||
timestamps: OpenTimestamp[],
|
||||
nostrId: string
|
||||
) => {
|
||||
if (isTimestampVerified(timestamps, nostrId)) {
|
||||
return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
|
||||
} else {
|
||||
return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
|
||||
}
|
||||
}
|
||||
|
||||
const getCompletedOpenTimestampsInfo = (timestamp: OpenTimestamp) => {
|
||||
if (timestamp.verification) {
|
||||
return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
|
||||
} else {
|
||||
return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
|
||||
}
|
||||
}
|
||||
|
||||
const getTimestampTooltipTitle = (label: string, isVerified: boolean) => {
|
||||
return `${label} / Open Timestamp ${isVerified ? 'Verified' : 'Pending'}`
|
||||
}
|
||||
|
||||
const isUserSignatureTimestampVerified = () => {
|
||||
if (
|
||||
userCanSign &&
|
||||
hexToNpub(usersPubkey) in parsedSignatureEvents &&
|
||||
timestamps &&
|
||||
timestamps.length > 0
|
||||
) {
|
||||
const nostrId = parsedSignatureEvents[hexToNpub(usersPubkey)].id
|
||||
return isTimestampVerified(timestamps, nostrId)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
return submittedBy ? (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.section}>
|
||||
<p>Signers</p>
|
||||
<div className={styles.users}>
|
||||
{submittedBy && (
|
||||
<DisplaySigner
|
||||
status={isValid ? SignStatus.Signed : SignStatus.Invalid}
|
||||
pubkey={submittedBy}
|
||||
/>
|
||||
)}
|
||||
|
||||
{submittedBy && signers.length ? (
|
||||
<Divider orientation="vertical" flexItem />
|
||||
) : null}
|
||||
|
||||
<UserAvatarGroup max={20}>
|
||||
{signers.map((signer) => {
|
||||
const pubkey = npubToHex(signer)!
|
||||
return (
|
||||
<DisplaySigner
|
||||
key={pubkey}
|
||||
status={signersStatus[signer]}
|
||||
pubkey={pubkey}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
</div>
|
||||
|
||||
{viewers.length > 0 && (
|
||||
<>
|
||||
<p>Viewers</p>
|
||||
<div className={styles.users}>
|
||||
<UserAvatarGroup max={20}>
|
||||
{viewers.map((signer) => {
|
||||
const pubkey = npubToHex(signer)!
|
||||
|
||||
return (
|
||||
<DisplaySigner
|
||||
key={pubkey}
|
||||
status={SignStatus.Viewer}
|
||||
pubkey={pubkey}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{exportedBy && (
|
||||
<>
|
||||
<p>Exported By</p>
|
||||
<div className={styles.users}>
|
||||
<UserAvatar pubkey={exportedBy} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.section}>
|
||||
<p>Details</p>
|
||||
|
||||
<Tooltip
|
||||
title={getTimestampTooltipTitle(
|
||||
'Publication date',
|
||||
!!(timestamps && id && isTimestampVerified(timestamps, id))
|
||||
)}
|
||||
placement="top"
|
||||
arrow
|
||||
disableInteractive
|
||||
>
|
||||
<span className={styles.detailsItem}>
|
||||
<FontAwesomeIcon icon={faCalendarPlus} />{' '}
|
||||
{createdAt ? formatTimestamp(createdAt) : <>—</>}{' '}
|
||||
{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) : <>—</>}
|
||||
{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
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<>—</>
|
||||
)
|
||||
) : (
|
||||
<>—</>
|
||||
)}
|
||||
{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} /> —
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
48
src/components/UsersDetails.tsx/style.module.scss
Normal file
@ -0,0 +1,48 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.container {
|
||||
border-radius: 4px;
|
||||
background: $overlay-background-color;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 25px;
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.users {
|
||||
display: flex;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.detailsItem {
|
||||
transition: ease 0.2s;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
|
||||
display: flex;
|
||||
|
||||
> :first-child {
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary-main;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket {
|
||||
margin-left: auto;
|
||||
}
|
27
src/components/copyModal.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Dialog, DialogContent, DialogTitle } from '@mui/material'
|
||||
import { CopyToClipboard } from './copyToClipboard'
|
||||
|
||||
interface CopyModalProps {
|
||||
open: boolean
|
||||
handleClose: () => void
|
||||
title: string
|
||||
textToCopy: string
|
||||
}
|
||||
|
||||
export const CopyModal = ({
|
||||
open,
|
||||
handleClose,
|
||||
title,
|
||||
textToCopy
|
||||
}: CopyModalProps) => {
|
||||
return (
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="xs">
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogContent>
|
||||
<CopyToClipboard textToCopy={textToCopy} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default CopyModal
|
51
src/components/copyToClipboard.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { ContentCopy } from '@mui/icons-material/'
|
||||
import { Box, IconButton, Typography } from '@mui/material'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
type Props = {
|
||||
textToCopy: string
|
||||
}
|
||||
|
||||
export const CopyToClipboard = ({ textToCopy }: Props) => {
|
||||
const handleCopyClick = () => {
|
||||
navigator.clipboard.writeText(textToCopy)
|
||||
toast.success('Copied to clipboard', {
|
||||
autoClose: 1000,
|
||||
hideProgressBar: true
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleCopyClick()
|
||||
}}
|
||||
component="label"
|
||||
sx={{
|
||||
flex: '1',
|
||||
overflow: 'auto',
|
||||
whiteSpace: 'nowrap',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{textToCopy}
|
||||
</Typography>
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleCopyClick()
|
||||
}}
|
||||
>
|
||||
<ContentCopy />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)
|
||||
}
|
78
src/components/getExtensionIconLabel.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import {
|
||||
faFilePdf,
|
||||
faFileExcel,
|
||||
faFileWord,
|
||||
faFilePowerpoint,
|
||||
faFileZipper,
|
||||
faFileCsv,
|
||||
faFileLines,
|
||||
faFileImage,
|
||||
faFile,
|
||||
IconDefinition
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
|
||||
export const getExtensionIconLabel = (extension: string) => {
|
||||
let icon: IconDefinition
|
||||
switch (extension.toLowerCase()) {
|
||||
case 'pdf':
|
||||
icon = faFilePdf
|
||||
break
|
||||
case 'json':
|
||||
icon = faFilePdf
|
||||
break
|
||||
|
||||
case 'xlsx':
|
||||
case 'xls':
|
||||
case 'xlsb':
|
||||
case 'xlsm':
|
||||
icon = faFileExcel
|
||||
break
|
||||
|
||||
case 'doc':
|
||||
case 'docx':
|
||||
icon = faFileWord
|
||||
break
|
||||
|
||||
case 'ppt':
|
||||
case 'pptx':
|
||||
icon = faFilePowerpoint
|
||||
break
|
||||
|
||||
case 'zip':
|
||||
case '7z':
|
||||
case 'rar':
|
||||
case 'tar':
|
||||
case 'gz':
|
||||
icon = faFileZipper
|
||||
break
|
||||
|
||||
case 'csv':
|
||||
icon = faFileCsv
|
||||
break
|
||||
|
||||
case 'txt':
|
||||
icon = faFileLines
|
||||
break
|
||||
|
||||
case 'png':
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
case 'gif':
|
||||
case 'svg':
|
||||
case 'bmp':
|
||||
case 'ico':
|
||||
icon = faFileImage
|
||||
break
|
||||
|
||||
default:
|
||||
icon = faFile
|
||||
return
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FontAwesomeIcon icon={icon} /> {extension.toUpperCase()}
|
||||
</>
|
||||
)
|
||||
}
|
16
src/components/getMarkComponents.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { MarkType } from '../types/drawing'
|
||||
import { MarkConfigs } from '../types/mark'
|
||||
import { MarkInputSignature } from './MarkInputs/Signature'
|
||||
import { MarkInputText } from './MarkInputs/Text'
|
||||
import { MarkRenderSignature } from './MarkRender/Signature'
|
||||
|
||||
export const MARK_TYPE_CONFIG: MarkConfigs = {
|
||||
[MarkType.TEXT]: {
|
||||
input: MarkInputText,
|
||||
render: ({ value }) => <>{value}</>
|
||||
},
|
||||
[MarkType.SIGNATURE]: {
|
||||
input: MarkInputSignature,
|
||||
render: MarkRenderSignature
|
||||
}
|
||||
}
|
7
src/components/username.module.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
@ -1,9 +1,8 @@
|
||||
import { Typography, IconButton, Box, useTheme } from '@mui/material'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { State } from '../store/rootReducer'
|
||||
import { hexToNpub } from '../utils'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { getProfileRoute } from '../routes'
|
||||
import { Typography } from '@mui/material'
|
||||
import { useAppSelector } from '../hooks/store'
|
||||
|
||||
import styles from './username.module.scss'
|
||||
import { AvatarIconButton } from './UserAvatarIconButton'
|
||||
|
||||
type Props = {
|
||||
username: string
|
||||
@ -11,85 +10,36 @@ type Props = {
|
||||
handleClick: (event: React.MouseEvent<HTMLElement>) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* This component will be used for the displaying logged in user in AppBar.
|
||||
* Clicking will open the menu.
|
||||
*/
|
||||
const Username = ({ username, avatarContent, handleClick }: Props) => {
|
||||
const hexKey = useSelector((state: State) => state.auth.usersPubkey)
|
||||
const hexKey = useAppSelector((state) => state.auth.usersPubkey)
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleClick}
|
||||
color="inherit"
|
||||
>
|
||||
<img
|
||||
src={avatarContent}
|
||||
alt="user-avatar"
|
||||
className="profile-image"
|
||||
style={{
|
||||
borderWidth: '3px',
|
||||
borderStyle: hexKey ? 'solid' : 'none',
|
||||
borderColor: `#${hexKey?.substring(0, 6)}`
|
||||
}}
|
||||
/>
|
||||
<div className={styles.container}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: '#3e3e3e',
|
||||
padding: '0 8px',
|
||||
fontWeight: 500,
|
||||
fontSize: '14px',
|
||||
color: 'var(--text-color)',
|
||||
display: { xs: 'none', md: 'flex' }
|
||||
}}
|
||||
>
|
||||
{username}
|
||||
</Typography>
|
||||
</IconButton>
|
||||
<AvatarIconButton
|
||||
src={avatarContent}
|
||||
hexKey={hexKey}
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Username
|
||||
|
||||
type UserProps = {
|
||||
pubkey: string
|
||||
name: string
|
||||
image?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* This component will be used for the displaying username and profile picture.
|
||||
* If image is not available, robohash image will be displayed
|
||||
*/
|
||||
export const UserComponent = ({ pubkey, name, image }: UserProps) => {
|
||||
const theme = useTheme()
|
||||
|
||||
const npub = hexToNpub(pubkey)
|
||||
const roboImage = `https://robohash.org/${npub}.png?set=set3`
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{ display: 'flex', alignItems: 'center', gap: '10px', flexGrow: 1 }}
|
||||
>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
2
src/constants.ts
Normal file
@ -0,0 +1,2 @@
|
||||
// Regular expression to validate the NIP-05 identifier
|
||||
export const NIP05_REGEX = /^(?:([\w.+-]+)@)?([\w_-]+(\.[\w_-]+)+)$/
|
@ -1,21 +1,23 @@
|
||||
import { EventTemplate } from 'nostr-tools'
|
||||
import { MetadataController, NostrController } from '.'
|
||||
import { appPrivateRoutes } from '../routes'
|
||||
import {
|
||||
setAuthState,
|
||||
setMetadataEvent,
|
||||
setRelayMapAction
|
||||
} from '../store/actions'
|
||||
import store from '../store/store'
|
||||
import { SignedEvent } from '../types'
|
||||
import {
|
||||
base64DecodeAuthToken,
|
||||
base64EncodeSignedEvent,
|
||||
compareObjects,
|
||||
getAuthToken,
|
||||
getRelayMap,
|
||||
getVisitedLink,
|
||||
saveAuthToken,
|
||||
compareObjects
|
||||
unixNow
|
||||
} from '../utils'
|
||||
import { appPrivateRoutes } from '../routes'
|
||||
import { SignedEvent } from '../types'
|
||||
|
||||
export class AuthController {
|
||||
private nostrController: NostrController
|
||||
@ -23,13 +25,13 @@ export class AuthController {
|
||||
|
||||
constructor() {
|
||||
this.nostrController = NostrController.getInstance()
|
||||
this.metadataController = new MetadataController()
|
||||
this.metadataController = MetadataController.getInstance()
|
||||
}
|
||||
|
||||
/**
|
||||
* Function will authenticate user by signing an auth event
|
||||
* which is done by calling the sign() function, where appropriate
|
||||
* method will be chosen (extension, nsecbunker or keys)
|
||||
* method will be chosen (extension or keys)
|
||||
*
|
||||
* @param pubkey of the user trying to login
|
||||
* @returns url to redirect if authentication successfull
|
||||
@ -54,13 +56,16 @@ export class AuthController {
|
||||
})
|
||||
|
||||
// Nostr uses unix timestamps
|
||||
const timestamp = Math.floor(Date.now() / 1000)
|
||||
const { hostname } = window.location
|
||||
const timestamp = unixNow()
|
||||
const { href } = window.location
|
||||
|
||||
const authEvent: EventTemplate = {
|
||||
kind: 1,
|
||||
tags: [],
|
||||
content: `${hostname}-${timestamp}`,
|
||||
kind: 27235,
|
||||
tags: [
|
||||
['u', href],
|
||||
['method', 'GET']
|
||||
],
|
||||
content: '',
|
||||
created_at: timestamp
|
||||
}
|
||||
|
||||
@ -74,14 +79,14 @@ export class AuthController {
|
||||
})
|
||||
)
|
||||
|
||||
const relayMap = await this.nostrController.getRelayMap(pubkey)
|
||||
const relayMap = await getRelayMap(pubkey)
|
||||
|
||||
if (Object.keys(relayMap).length < 1) {
|
||||
// Navigate user to relays page if relay map is empty
|
||||
return Promise.resolve(appPrivateRoutes.relays)
|
||||
}
|
||||
|
||||
if (store.getState().auth?.loggedIn) {
|
||||
if (store.getState().auth.loggedIn) {
|
||||
if (!compareObjects(store.getState().relays?.map, relayMap.map))
|
||||
store.dispatch(setRelayMapAction(relayMap.map))
|
||||
}
|
||||
|
@ -1,146 +1,165 @@
|
||||
import {
|
||||
Event,
|
||||
Filter,
|
||||
SimplePool,
|
||||
VerifiedEvent,
|
||||
kinds,
|
||||
validateEvent,
|
||||
verifyEvent,
|
||||
Event,
|
||||
EventTemplate,
|
||||
nip19
|
||||
verifyEvent
|
||||
} from 'nostr-tools'
|
||||
import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types'
|
||||
import { NostrController } from '.'
|
||||
import { toast } from 'react-toastify'
|
||||
import { queryNip05 } from '../utils'
|
||||
import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk'
|
||||
import { EventEmitter } from 'tseep'
|
||||
import { NostrController, relayController } from '.'
|
||||
import { localCache } from '../services'
|
||||
import { ProfileMetadata, RelaySet } from '../types'
|
||||
import {
|
||||
findRelayListAndUpdateCache,
|
||||
findRelayListInCache,
|
||||
getDefaultRelaySet,
|
||||
getUserRelaySet,
|
||||
isOlderThanOneDay,
|
||||
unixNow
|
||||
} from '../utils'
|
||||
import { DEFAULT_LOOK_UP_RELAY_LIST } from '../utils/const'
|
||||
|
||||
export class MetadataController {
|
||||
export class MetadataController extends EventEmitter {
|
||||
private static instance: MetadataController
|
||||
private nostrController: NostrController
|
||||
private specialMetadataRelay = 'wss://purplepag.es'
|
||||
private pendingFetches = new Map<string, Promise<Event | null>>() // Track pending fetches
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.nostrController = NostrController.getInstance()
|
||||
}
|
||||
|
||||
public getEmptyMetadataEvent = (): Event => {
|
||||
return {
|
||||
content: '',
|
||||
created_at: new Date().valueOf(),
|
||||
id: '',
|
||||
kind: 0,
|
||||
pubkey: '',
|
||||
sig: '',
|
||||
tags: []
|
||||
public static getInstance(): MetadataController {
|
||||
if (!MetadataController.instance) {
|
||||
MetadataController.instance = new MetadataController()
|
||||
}
|
||||
return MetadataController.instance
|
||||
}
|
||||
|
||||
public findMetadata = async (hexKey: string) => {
|
||||
/**
|
||||
* Asynchronously checks for more recent metadata events authored by a specific key.
|
||||
* If a more recent metadata event is found, it is handled and returned.
|
||||
* If no more recent event is found, the current event is returned.
|
||||
* @param hexKey The hexadecimal key of the author to filter metadata events.
|
||||
* @param currentEvent The current metadata event, if any, to compare with newer events.
|
||||
* @returns A promise resolving to the most recent metadata event found, or null if none is found.
|
||||
*/
|
||||
private async checkForMoreRecentMetadata(
|
||||
hexKey: string,
|
||||
currentEvent: Event | null
|
||||
): Promise<Event | null> {
|
||||
// Return the ongoing fetch promise if one exists for the same hexKey
|
||||
if (this.pendingFetches.has(hexKey)) {
|
||||
return this.pendingFetches.get(hexKey)!
|
||||
}
|
||||
|
||||
// Define the event filter to only include metadata events authored by the given key
|
||||
const eventFilter: Filter = {
|
||||
kinds: [kinds.Metadata],
|
||||
authors: [hexKey]
|
||||
}
|
||||
|
||||
const pool = new SimplePool()
|
||||
|
||||
const metadataEvent = await pool
|
||||
.get([this.specialMetadataRelay], eventFilter)
|
||||
const fetchPromise = relayController
|
||||
.fetchEvent(eventFilter, DEFAULT_LOOK_UP_RELAY_LIST)
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
return null
|
||||
})
|
||||
.finally(() => {
|
||||
this.pendingFetches.delete(hexKey)
|
||||
})
|
||||
|
||||
this.pendingFetches.set(hexKey, fetchPromise)
|
||||
|
||||
const metadataEvent = await fetchPromise
|
||||
|
||||
if (
|
||||
metadataEvent &&
|
||||
validateEvent(metadataEvent) &&
|
||||
verifyEvent(metadataEvent)
|
||||
) {
|
||||
if (
|
||||
!currentEvent ||
|
||||
metadataEvent.created_at >= currentEvent.created_at
|
||||
) {
|
||||
this.handleNewMetadataEvent(metadataEvent)
|
||||
}
|
||||
return metadataEvent
|
||||
}
|
||||
|
||||
const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
|
||||
const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
|
||||
const relays = [...hardcodedPopularRelays]
|
||||
// todo/implement: if no valid metadata event is found in DEFAULT_LOOK_UP_RELAY_LIST
|
||||
// try to query user relay list
|
||||
|
||||
const events = await pool.querySync(relays, eventFilter).catch((err) => {
|
||||
console.error(err)
|
||||
return null
|
||||
})
|
||||
|
||||
if (events && events.length) {
|
||||
events.sort((a, b) => b.created_at - a.created_at)
|
||||
|
||||
for (const event of events) {
|
||||
if (validateEvent(event) && verifyEvent(event)) {
|
||||
return event
|
||||
}
|
||||
}
|
||||
// if current event is null we should cache empty metadata event for provided hexKey
|
||||
if (!currentEvent) {
|
||||
const emptyMetadata = this.getEmptyMetadataEvent(hexKey)
|
||||
this.handleNewMetadataEvent(emptyMetadata as VerifiedEvent)
|
||||
}
|
||||
|
||||
throw new Error('Mo metadata found.')
|
||||
return currentEvent
|
||||
}
|
||||
|
||||
public findRelayListMetadata = async (hexKey: string) => {
|
||||
const eventFilter: Filter = {
|
||||
kinds: [kinds.RelayList],
|
||||
authors: [hexKey]
|
||||
}
|
||||
|
||||
const pool = new SimplePool()
|
||||
|
||||
let relayEvent = await pool
|
||||
.get([this.specialMetadataRelay], eventFilter)
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
return null
|
||||
})
|
||||
|
||||
if (!relayEvent) {
|
||||
const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
|
||||
const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
|
||||
const relays = [...hardcodedPopularRelays]
|
||||
|
||||
relayEvent = await pool.get(relays, eventFilter).catch((err) => {
|
||||
console.error(err)
|
||||
return null
|
||||
})
|
||||
}
|
||||
|
||||
if (relayEvent) {
|
||||
const relaySet: RelaySet = {
|
||||
read: [],
|
||||
write: []
|
||||
}
|
||||
|
||||
// a list of r tags with relay URIs and a read or write marker.
|
||||
const relayTags = relayEvent.tags.filter((tag) => tag[0] === 'r')
|
||||
|
||||
// Relays marked as read / write are called READ / WRITE relays, respectively
|
||||
relayTags.forEach((tag) => {
|
||||
if (tag.length >= 3) {
|
||||
const marker = tag[2]
|
||||
|
||||
if (marker === 'read') {
|
||||
relaySet.read.push(tag[1])
|
||||
} else if (marker === 'write') {
|
||||
relaySet.write.push(tag[1])
|
||||
}
|
||||
}
|
||||
|
||||
// If the marker is omitted, the relay is used for both purposes
|
||||
if (tag.length === 2) {
|
||||
relaySet.read.push(tag[1])
|
||||
relaySet.write.push(tag[1])
|
||||
}
|
||||
})
|
||||
|
||||
return relaySet
|
||||
}
|
||||
|
||||
throw new Error('No relay list metadata found.')
|
||||
/**
|
||||
* Handle new metadata events and emit them to subscribers
|
||||
*/
|
||||
private async handleNewMetadataEvent(event: VerifiedEvent) {
|
||||
// update the event in local cache
|
||||
localCache.addUserMetadata(event)
|
||||
// Emit the event to subscribers.
|
||||
this.emit(event.pubkey, event.kind, event)
|
||||
}
|
||||
|
||||
public extractProfileMetadataContent = (event: VerifiedEvent) => {
|
||||
/**
|
||||
* Finds metadata for a given hexadecimal key.
|
||||
*
|
||||
* @param hexKey - The hexadecimal key to search for metadata.
|
||||
* @returns A promise that resolves to the metadata event.
|
||||
*/
|
||||
public findMetadata = async (hexKey: string): Promise<Event | null> => {
|
||||
// Attempt to retrieve the metadata event from the local cache
|
||||
const cachedMetadataEvent = await localCache.getUserMetadata(hexKey)
|
||||
|
||||
// If cached metadata is found, check its validity
|
||||
if (cachedMetadataEvent) {
|
||||
// Check if the cached metadata is older than one day
|
||||
if (isOlderThanOneDay(cachedMetadataEvent.cachedAt)) {
|
||||
// If older than one week, find the metadata from relays in background
|
||||
this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event)
|
||||
}
|
||||
|
||||
// Return the cached metadata event
|
||||
return cachedMetadataEvent.event
|
||||
}
|
||||
|
||||
// If no cached metadata is found, retrieve it from relays
|
||||
return this.checkForMoreRecentMetadata(hexKey, null)
|
||||
}
|
||||
|
||||
/**
|
||||
* Based on the hexKey of the current user, this method attempts to retrieve a relay set.
|
||||
* @func findRelayListInCache first checks if there is already an up-to-date
|
||||
* relay list available in cache; if not -
|
||||
* @func findRelayListAndUpdateCache checks if the relevant relay event is available from
|
||||
* the purple pages relay;
|
||||
* @func findRelayListAndUpdateCache will run again if the previous two calls return null and
|
||||
* check if the relevant relay event can be obtained from 'most popular relays'
|
||||
* If relay event is found, it will be saved in cache for future use
|
||||
* @param hexKey of the current user
|
||||
* @return RelaySet which will contain either relays extracted from the user Relay Event
|
||||
* or a fallback RelaySet with Sigit's Relay
|
||||
*/
|
||||
public findRelayListMetadata = async (hexKey: string): Promise<RelaySet> => {
|
||||
const relayEvent =
|
||||
(await findRelayListInCache(hexKey)) ||
|
||||
(await findRelayListAndUpdateCache(DEFAULT_LOOK_UP_RELAY_LIST, hexKey))
|
||||
|
||||
return relayEvent ? getUserRelaySet(relayEvent.tags) : getDefaultRelaySet()
|
||||
}
|
||||
|
||||
public extractProfileMetadataContent = (event: Event) => {
|
||||
try {
|
||||
if (!event.content) return {}
|
||||
return JSON.parse(event.content) as ProfileMetadata
|
||||
@ -157,7 +176,7 @@ export class MetadataController {
|
||||
let signedMetadataEvent = event
|
||||
|
||||
if (event.sig.length < 1) {
|
||||
const timestamp = Math.floor(Date.now() / 1000)
|
||||
const timestamp = unixNow()
|
||||
|
||||
// Metadata event to publish to the wss://purplepag.es relay
|
||||
const newMetadataEvent: Event = {
|
||||
@ -169,139 +188,32 @@ export class MetadataController {
|
||||
await this.nostrController.signEvent(newMetadataEvent)
|
||||
}
|
||||
|
||||
await this.nostrController
|
||||
.publishEvent(signedMetadataEvent, [this.specialMetadataRelay])
|
||||
await relayController
|
||||
.publish(signedMetadataEvent, [this.specialMetadataRelay])
|
||||
.then((relays) => {
|
||||
toast.success(`Metadata event published on: ${relays.join('\n')}`)
|
||||
if (relays.length) {
|
||||
toast.success(`Metadata event published on: ${relays.join('\n')}`)
|
||||
this.handleNewMetadataEvent(signedMetadataEvent as VerifiedEvent)
|
||||
} else {
|
||||
toast.error('Could not publish metadata event to any relay!')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error(err.message)
|
||||
})
|
||||
}
|
||||
|
||||
public getNostrJoiningBlockNumber = async (
|
||||
hexKey: string
|
||||
): Promise<NostrJoiningBlock | null> => {
|
||||
const relaySet = await this.findRelayListMetadata(hexKey)
|
||||
|
||||
const userRelays: string[] = []
|
||||
|
||||
// find user's relays
|
||||
if (relaySet.write.length > 0) {
|
||||
userRelays.push(...relaySet.write)
|
||||
} else {
|
||||
const metadata = await this.findMetadata(hexKey)
|
||||
const metadataContent = this.extractProfileMetadataContent(metadata)
|
||||
|
||||
if (metadataContent?.nip05) {
|
||||
const nip05Profile = await queryNip05(metadataContent.nip05)
|
||||
|
||||
if (nip05Profile && nip05Profile.pubkey === hexKey) {
|
||||
userRelays.push(...nip05Profile.relays)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (userRelays.length === 0) return null
|
||||
|
||||
// filter for finding user's first kind 1 event
|
||||
const eventFilter: Filter = {
|
||||
kinds: [kinds.ShortTextNote],
|
||||
authors: [hexKey]
|
||||
}
|
||||
|
||||
const pool = new SimplePool()
|
||||
|
||||
// find user's kind 1 events published on user's relays
|
||||
const events = await pool.querySync(userRelays, eventFilter)
|
||||
if (events && events.length) {
|
||||
// sort events by created_at time in ascending order
|
||||
events.sort((a, b) => a.created_at - b.created_at)
|
||||
|
||||
// get first ever event published on user's relays
|
||||
const event = events[0]
|
||||
const { created_at } = event
|
||||
|
||||
// initialize job request
|
||||
const jobEventTemplate: EventTemplate = {
|
||||
content: '',
|
||||
created_at: Math.round(Date.now() / 1000),
|
||||
kind: 68001,
|
||||
tags: [
|
||||
['i', `${created_at * 1000}`],
|
||||
['j', 'blockChain-block-number']
|
||||
]
|
||||
}
|
||||
|
||||
// sign job request event
|
||||
const jobSignedEvent =
|
||||
await this.nostrController.signEvent(jobEventTemplate)
|
||||
|
||||
const relays = [
|
||||
'wss://relay.damus.io',
|
||||
'wss://relay.primal.net',
|
||||
'wss://relayable.org'
|
||||
]
|
||||
|
||||
// publish job request
|
||||
await this.nostrController.publishEvent(jobSignedEvent, relays)
|
||||
|
||||
console.log('jobSignedEvent :>> ', jobSignedEvent)
|
||||
|
||||
const subscribeWithTimeout = (
|
||||
subscription: NDKSubscription,
|
||||
timeoutMs: number
|
||||
): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const eventHandler = (event: NDKEvent) => {
|
||||
subscription.stop()
|
||||
resolve(event.content)
|
||||
}
|
||||
|
||||
subscription.on('event', eventHandler)
|
||||
|
||||
// Set up a timeout to stop the subscription after a specified time
|
||||
const timeout = setTimeout(() => {
|
||||
subscription.stop() // Stop the subscription
|
||||
reject(new Error('Subscription timed out')) // Reject the promise with a timeout error
|
||||
}, timeoutMs)
|
||||
|
||||
// Handle subscription close event
|
||||
subscription.on('close', () => clearTimeout(timeout))
|
||||
})
|
||||
}
|
||||
|
||||
const dvmNDK = new NDK({
|
||||
explicitRelayUrls: relays
|
||||
})
|
||||
|
||||
await dvmNDK.connect(2000)
|
||||
|
||||
// filter for getting DVM job's result
|
||||
const sub = dvmNDK.subscribe({
|
||||
kinds: [68002 as number],
|
||||
'#e': [jobSignedEvent.id],
|
||||
'#p': [jobSignedEvent.pubkey]
|
||||
})
|
||||
|
||||
// asynchronously get block number from dvm job with 20 seconds timeout
|
||||
const dvmJobResult = await subscribeWithTimeout(sub, 20000)
|
||||
|
||||
const encodedEventPointer = nip19.neventEncode({
|
||||
id: event.id,
|
||||
relays: userRelays,
|
||||
author: event.pubkey,
|
||||
kind: event.kind
|
||||
})
|
||||
|
||||
return {
|
||||
block: parseInt(dvmJobResult),
|
||||
encodedEventPointer
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
public validate = (event: Event) => validateEvent(event) && verifyEvent(event)
|
||||
|
||||
public getEmptyMetadataEvent = (pubkey?: string): Event => {
|
||||
return {
|
||||
content: '',
|
||||
created_at: new Date().valueOf(),
|
||||
id: '',
|
||||
kind: 0,
|
||||
pubkey: pubkey || '',
|
||||
sig: '',
|
||||
tags: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,216 +1,24 @@
|
||||
import NDK, {
|
||||
NDKEvent,
|
||||
NDKNip46Signer,
|
||||
NDKPrivateKeySigner,
|
||||
NDKUser,
|
||||
NostrEvent,
|
||||
NDKSubscription
|
||||
} from '@nostr-dev-kit/ndk'
|
||||
import {
|
||||
Event,
|
||||
EventTemplate,
|
||||
SimplePool,
|
||||
UnsignedEvent,
|
||||
Filter,
|
||||
Relay,
|
||||
finalizeEvent,
|
||||
nip04,
|
||||
nip19,
|
||||
kinds
|
||||
} from 'nostr-tools'
|
||||
import { EventTemplate, UnsignedEvent } from 'nostr-tools'
|
||||
import { WindowNostr } from 'nostr-tools/nip07'
|
||||
import { EventEmitter } from 'tseep'
|
||||
import {
|
||||
updateNsecbunkerPubkey,
|
||||
setMostPopularRelaysAction,
|
||||
setRelayInfoAction,
|
||||
setRelayConnectionStatusAction
|
||||
} from '../store/actions'
|
||||
import { AuthState, LoginMethods } from '../store/auth/types'
|
||||
import store from '../store/store'
|
||||
import {
|
||||
SignedEvent,
|
||||
RelayMap,
|
||||
RelayStats,
|
||||
ReadRelay,
|
||||
RelayInfoObject,
|
||||
RelayConnectionStatus,
|
||||
RelayConnectionState
|
||||
} from '../types'
|
||||
import {
|
||||
compareObjects,
|
||||
getNsecBunkerDelegatedKey,
|
||||
verifySignedEvent
|
||||
} from '../utils'
|
||||
import axios from 'axios'
|
||||
import { SignedEvent } from '../types'
|
||||
import { LoginMethodContext } from '../services/LoginMethodStrategy/loginMethodContext'
|
||||
|
||||
export class NostrController extends EventEmitter {
|
||||
private static instance: NostrController
|
||||
|
||||
private bunkerNDK: NDK | undefined
|
||||
private remoteSigner: NDKNip46Signer | undefined
|
||||
|
||||
private connectedRelays: Relay[] | undefined
|
||||
|
||||
private constructor() {
|
||||
super()
|
||||
}
|
||||
|
||||
private getNostrObject = () => {
|
||||
if (window.nostr) return window.nostr
|
||||
if (window.nostr) return window.nostr as WindowNostr
|
||||
|
||||
throw new Error(
|
||||
`window.nostr object not present. Make sure you have an nostr extension installed/working properly.`
|
||||
)
|
||||
}
|
||||
|
||||
public nsecBunkerInit = async (relays: string[]) => {
|
||||
// Don't reinstantiate bunker NDK if exists with same relays
|
||||
if (
|
||||
this.bunkerNDK &&
|
||||
this.bunkerNDK.explicitRelayUrls?.length === relays.length &&
|
||||
this.bunkerNDK.explicitRelayUrls?.every((relay) => relays.includes(relay))
|
||||
)
|
||||
return
|
||||
|
||||
this.bunkerNDK = new NDK({
|
||||
explicitRelayUrls: relays
|
||||
})
|
||||
|
||||
try {
|
||||
await this.bunkerNDK
|
||||
.connect(2000)
|
||||
.then(() => {
|
||||
console.log(
|
||||
`Successfully connected to the nsecBunker relays: ${relays.join(
|
||||
','
|
||||
)}`
|
||||
)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Error connecting to the nsecBunker relays: ${relays.join(
|
||||
','
|
||||
)} ${err}`
|
||||
)
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates nSecBunker signer instance for the given npub
|
||||
* Or if npub omitted it will return existing signer
|
||||
* If neither, error will be thrown
|
||||
* @param npub nPub / public key in hex format
|
||||
* @returns nsecBunker Signer instance
|
||||
*/
|
||||
public createNsecBunkerSigner = async (
|
||||
npub: string | undefined
|
||||
): Promise<NDKNip46Signer> => {
|
||||
const nsecBunkerDelegatedKey = getNsecBunkerDelegatedKey()
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!nsecBunkerDelegatedKey) {
|
||||
reject('nsecBunker delegated key is not found in the browser.')
|
||||
return
|
||||
}
|
||||
const localSigner = new NDKPrivateKeySigner(nsecBunkerDelegatedKey)
|
||||
|
||||
if (!npub) {
|
||||
if (this.remoteSigner) resolve(this.remoteSigner)
|
||||
|
||||
const npubFromStorage = (store.getState().auth as AuthState)
|
||||
.nsecBunkerPubkey
|
||||
|
||||
if (npubFromStorage) {
|
||||
npub = npubFromStorage
|
||||
} else {
|
||||
reject(
|
||||
'No signer instance present, no npub provided by user or found in the browser.'
|
||||
)
|
||||
return
|
||||
}
|
||||
} else {
|
||||
store.dispatch(updateNsecbunkerPubkey(npub))
|
||||
}
|
||||
|
||||
// Pubkey of a key pair stored in nsecbunker that will be used to sign event with
|
||||
const appPubkeyOrToken = npub.includes('npub')
|
||||
? npub
|
||||
: nip19.npubEncode(npub)
|
||||
|
||||
/**
|
||||
* When creating and NDK instance we create new connection to the relay
|
||||
* To prevent too much connections and hitting rate limits, if npub against which we sign
|
||||
* we will reuse existing instance. Otherwise we will create new NDK and signer instance.
|
||||
*/
|
||||
if (!this.remoteSigner || this.remoteSigner?.remotePubkey !== npub) {
|
||||
this.remoteSigner = new NDKNip46Signer(
|
||||
this.bunkerNDK!,
|
||||
appPubkeyOrToken,
|
||||
localSigner
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* when nsecbunker-delegated-key is regenerated we have to reinitialize the remote signer
|
||||
*/
|
||||
if (this.remoteSigner.localSigner !== localSigner) {
|
||||
this.remoteSigner = new NDKNip46Signer(
|
||||
this.bunkerNDK!,
|
||||
appPubkeyOrToken,
|
||||
localSigner
|
||||
)
|
||||
}
|
||||
|
||||
resolve(this.remoteSigner)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Signs the nostr event and returns the sig and id or full raw nostr event
|
||||
* @param npub stored in nsecBunker to sign with
|
||||
* @param event to be signed
|
||||
* @param returnFullEvent whether to return full raw nostr event or just SIG and ID values
|
||||
*/
|
||||
public signWithNsecBunker = async (
|
||||
npub: string | undefined,
|
||||
event: NostrEvent,
|
||||
returnFullEvent = true
|
||||
): Promise<{ id: string; sig: string } | NostrEvent> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.createNsecBunkerSigner(npub)
|
||||
.then(async (signer) => {
|
||||
const ndkEvent = new NDKEvent(undefined, event)
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
reject('Timeout occurred while waiting for event signing')
|
||||
}, 60000) // 60000 ms (1 min) = 1000 * 60
|
||||
|
||||
await ndkEvent.sign(signer).catch((err) => {
|
||||
clearTimeout(timeout)
|
||||
reject(err)
|
||||
return
|
||||
})
|
||||
|
||||
clearTimeout(timeout)
|
||||
|
||||
if (returnFullEvent) {
|
||||
resolve(ndkEvent.rawEvent())
|
||||
} else {
|
||||
resolve({
|
||||
id: ndkEvent.id,
|
||||
sig: ndkEvent.sig!
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
public static getInstance(): NostrController {
|
||||
if (!NostrController.instance) {
|
||||
NostrController.instance = new NostrController()
|
||||
@ -219,163 +27,73 @@ export class NostrController extends EventEmitter {
|
||||
}
|
||||
|
||||
/**
|
||||
* Function will publish provided event to the provided relays
|
||||
* Encrypts the given content for the specified receiver using NIP-44 encryption.
|
||||
*
|
||||
* @param receiver The public key of the receiver.
|
||||
* @param content The content to be encrypted.
|
||||
* @returns The encrypted content as a string.
|
||||
* @throws Error if the nostr extension does not support NIP-44, if the private key pair is not found, or if the login method is unsupported.
|
||||
*/
|
||||
publishEvent = async (event: Event, relays: string[]) => {
|
||||
const simplePool = new SimplePool()
|
||||
nip44Encrypt = async (receiver: string, content: string) => {
|
||||
// Retrieve the current login method from the application's redux state.
|
||||
const loginMethod = store.getState().auth.loginMethod
|
||||
const context = new LoginMethodContext(loginMethod)
|
||||
|
||||
const promises = simplePool.publish(relays, event)
|
||||
// Handle encryption when the login method is via an extension.
|
||||
return await context.nip44Encrypt(receiver, content)
|
||||
}
|
||||
|
||||
const results = await Promise.allSettled(promises)
|
||||
/**
|
||||
* Decrypts the given content from the specified sender using NIP-44 decryption.
|
||||
*
|
||||
* @param sender The public key of the sender.
|
||||
* @param content The encrypted content to be decrypted.
|
||||
* @returns The decrypted content as a string.
|
||||
* @throws Error if the nostr extension does not support NIP-44, if the private key pair is not found, or if the login method is unsupported.
|
||||
*/
|
||||
nip44Decrypt = async (sender: string, content: string) => {
|
||||
// Retrieve the current login method from the application's redux state.
|
||||
const loginMethod = store.getState().auth.loginMethod
|
||||
const context = new LoginMethodContext(loginMethod)
|
||||
|
||||
const publishedRelays: string[] = []
|
||||
|
||||
console.log('results of publish event :>> ', results)
|
||||
|
||||
results.forEach((result, index) => {
|
||||
if (result.status === 'fulfilled') {
|
||||
publishedRelays.push(relays[index])
|
||||
}
|
||||
})
|
||||
|
||||
if (publishedRelays.length === 0) {
|
||||
const failedPublishes: any[] = []
|
||||
const fallbackRejectionReason =
|
||||
'Attempt to publish an event has been rejected with unknown reason.'
|
||||
|
||||
results.forEach((res, index) => {
|
||||
if (res.status === 'rejected') {
|
||||
failedPublishes.push({
|
||||
relay: relays[index],
|
||||
error: res.reason
|
||||
? res.reason.message || fallbackRejectionReason
|
||||
: fallbackRejectionReason
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
throw failedPublishes
|
||||
}
|
||||
|
||||
return publishedRelays
|
||||
// Handle decryption
|
||||
return await context.nip44Decrypt(sender, content)
|
||||
}
|
||||
|
||||
/**
|
||||
* Signs an event with private key (if it is present in local storage) or
|
||||
* with browser extension (if it is present) or
|
||||
* with nSecBunker instance.
|
||||
* with browser extension (if it is present)
|
||||
* @param event - unsigned nostr event.
|
||||
* @returns - a promised that is resolved with signed nostr event.
|
||||
*/
|
||||
signEvent = async (
|
||||
event: UnsignedEvent | EventTemplate
|
||||
): Promise<SignedEvent> => {
|
||||
const loginMethod = (store.getState().auth as AuthState).loginMethod
|
||||
const loginMethod = store.getState().auth.loginMethod
|
||||
const context = new LoginMethodContext(loginMethod)
|
||||
|
||||
if (!loginMethod) {
|
||||
return Promise.reject('No login method found in the browser storage')
|
||||
}
|
||||
|
||||
if (loginMethod === LoginMethods.nsecBunker) {
|
||||
// Check if nsecBunker is available
|
||||
if (!this.bunkerNDK) {
|
||||
return Promise.reject(
|
||||
`Login method is ${loginMethod} but bunkerNDK is not created`
|
||||
)
|
||||
}
|
||||
|
||||
if (!this.remoteSigner) {
|
||||
return Promise.reject(
|
||||
`Login method is ${loginMethod} but bunkerNDK is not created`
|
||||
)
|
||||
}
|
||||
|
||||
const signedEvent = await this.signWithNsecBunker(
|
||||
'',
|
||||
event as NostrEvent
|
||||
).catch((err) => {
|
||||
throw err
|
||||
})
|
||||
|
||||
return Promise.resolve(signedEvent as SignedEvent)
|
||||
} else if (loginMethod === LoginMethods.privateKey) {
|
||||
const keys = (store.getState().auth as AuthState).keyPair
|
||||
|
||||
if (!keys) {
|
||||
return Promise.reject(
|
||||
`Login method is ${loginMethod}, but keys are not found`
|
||||
)
|
||||
}
|
||||
|
||||
const { private: nsec } = keys
|
||||
const privateKey = nip19.decode(nsec).data as Uint8Array
|
||||
|
||||
const signedEvent = finalizeEvent(event, privateKey)
|
||||
|
||||
verifySignedEvent(signedEvent)
|
||||
|
||||
return Promise.resolve(signedEvent)
|
||||
} else if (loginMethod === LoginMethods.extension) {
|
||||
const nostr = this.getNostrObject()
|
||||
|
||||
return (await nostr.signEvent(event as NostrEvent).catch((err: any) => {
|
||||
console.log('Error while signing event: ', err)
|
||||
|
||||
throw err
|
||||
})) as Event
|
||||
} else {
|
||||
return Promise.reject(
|
||||
`We could not sign the event, none of the signing methods are available`
|
||||
)
|
||||
}
|
||||
return await context.signEvent(event)
|
||||
}
|
||||
|
||||
nip04Encrypt = async (receiver: string, content: string) => {
|
||||
const loginMethod = (store.getState().auth as AuthState).loginMethod
|
||||
nip04Encrypt = async (receiver: string, content: string): Promise<string> => {
|
||||
const loginMethod = store.getState().auth.loginMethod
|
||||
const context = new LoginMethodContext(loginMethod)
|
||||
|
||||
if (loginMethod === LoginMethods.extension) {
|
||||
const nostr = this.getNostrObject()
|
||||
return await context.nip04Encrypt(receiver, content)
|
||||
}
|
||||
|
||||
if (!nostr.nip04) {
|
||||
throw new Error(
|
||||
`Your nostr extension does not support nip04 encryption & decryption`
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Decrypts a given content based on the current login method.
|
||||
*
|
||||
* @param sender - The sender's public key.
|
||||
* @param content - The encrypted content to decrypt.
|
||||
* @returns A promise that resolves to the decrypted content.
|
||||
*/
|
||||
nip04Decrypt = async (sender: string, content: string): Promise<string> => {
|
||||
const loginMethod = store.getState().auth.loginMethod
|
||||
const context = new LoginMethodContext(loginMethod)
|
||||
|
||||
const encrypted = await nostr.nip04.encrypt(receiver, content)
|
||||
return encrypted
|
||||
}
|
||||
|
||||
if (loginMethod === LoginMethods.privateKey) {
|
||||
const keys = (store.getState().auth as AuthState).keyPair
|
||||
|
||||
if (!keys) {
|
||||
throw new Error(
|
||||
`Login method is ${LoginMethods.privateKey} but private & public key pair is not found.`
|
||||
)
|
||||
}
|
||||
|
||||
const { private: nsec } = keys
|
||||
const privateKey = nip19.decode(nsec).data as Uint8Array
|
||||
|
||||
const encrypted = await nip04.encrypt(privateKey, receiver, content)
|
||||
return encrypted
|
||||
}
|
||||
|
||||
if (loginMethod === LoginMethods.nsecBunker) {
|
||||
const user = new NDKUser({ pubkey: receiver })
|
||||
|
||||
this.remoteSigner?.on('authUrl', (authUrl) => {
|
||||
this.emit('nsecbunker-auth', authUrl)
|
||||
})
|
||||
|
||||
if (!this.remoteSigner) throw new Error('Remote signer is undefined.')
|
||||
const encrypted = await this.remoteSigner.encrypt(user, content)
|
||||
|
||||
return encrypted
|
||||
}
|
||||
|
||||
throw new Error('Login method is undefined')
|
||||
return await context.nip04Decrypt(sender, content)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -384,8 +102,12 @@ export class NostrController extends EventEmitter {
|
||||
*/
|
||||
capturePublicKey = async (): Promise<string> => {
|
||||
const nostr = this.getNostrObject()
|
||||
const pubKey = await nostr.getPublicKey().catch((err: any) => {
|
||||
return Promise.reject(err.message)
|
||||
const pubKey = await nostr.getPublicKey().catch((err: unknown) => {
|
||||
if (err instanceof Error) {
|
||||
return Promise.reject(err.message)
|
||||
} else {
|
||||
return Promise.reject(JSON.stringify(err))
|
||||
}
|
||||
})
|
||||
|
||||
if (!pubKey) {
|
||||
@ -394,367 +116,4 @@ export class NostrController extends EventEmitter {
|
||||
|
||||
return Promise.resolve(pubKey)
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates NDK Private Signer
|
||||
* @returns nSecBunker delegated key
|
||||
*/
|
||||
generateDelegatedKey = (): string => {
|
||||
return NDKPrivateKeySigner.generate().privateKey!
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 = await this.getMostPopularRelays()
|
||||
|
||||
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(mostPopularRelays, 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
|
||||
}
|
||||
})
|
||||
|
||||
this.getRelayInfo(Object.keys(relaysMap))
|
||||
|
||||
this.connectToRelays(Object.keys(relaysMap))
|
||||
|
||||
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.
|
||||
* @param extraRelaysToPublish - optional relays to publish relay map.
|
||||
* @returns - promise that resolves into a string representing publishing result.
|
||||
*/
|
||||
publishRelayMap = async (
|
||||
relayMap: RelayMap,
|
||||
npub: string,
|
||||
extraRelaysToPublish?: 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
|
||||
|
||||
// Add extra relays if provided
|
||||
if (extraRelaysToPublish) {
|
||||
relaysToPublish = [...relaysToPublish, ...extraRelaysToPublish]
|
||||
}
|
||||
|
||||
// If relay map is empty, use most popular relay URIs
|
||||
if (!relaysToPublish.length) {
|
||||
relaysToPublish = await this.getMostPopularRelays()
|
||||
}
|
||||
|
||||
const publishResult = await this.publishEvent(signedEvent, relaysToPublish)
|
||||
|
||||
if (publishResult && publishResult.length) {
|
||||
return Promise.resolve(
|
||||
`Relay Map published on: ${publishResult.join('\n')}`
|
||||
)
|
||||
}
|
||||
|
||||
return Promise.reject('Publishing updated relay map was unsuccessful.')
|
||||
}
|
||||
|
||||
/**
|
||||
* Provides most popular relays.
|
||||
* @param numberOfTopRelays - number representing how many most popular relays to provide
|
||||
* @returns - promise that resolves into an array of most popular relays
|
||||
*/
|
||||
getMostPopularRelays = async (
|
||||
numberOfTopRelays: number = 30
|
||||
): Promise<string[]> => {
|
||||
const mostPopularRelaysState = store.getState().relays?.mostPopular
|
||||
|
||||
// return most popular relays from app state if present
|
||||
if (mostPopularRelaysState) return mostPopularRelaysState
|
||||
|
||||
// relays in env
|
||||
const { VITE_MOST_POPULAR_RELAYS } = import.meta.env
|
||||
const hardcodedPopularRelays = (VITE_MOST_POPULAR_RELAYS || '').split(' ')
|
||||
const url = `https://stats.nostr.band/stats_api?method=stats`
|
||||
|
||||
const response = await axios.get<RelayStats>(url).catch(() => undefined)
|
||||
|
||||
if (!response) {
|
||||
return hardcodedPopularRelays //return hardcoded relay list
|
||||
}
|
||||
|
||||
const data = response.data
|
||||
|
||||
if (!data) {
|
||||
return hardcodedPopularRelays //return hardcoded relay list
|
||||
}
|
||||
|
||||
const apiTopRelays = data.relay_stats.user_picks.read_relays
|
||||
.slice(0, numberOfTopRelays)
|
||||
.map((relay: ReadRelay) => relay.d)
|
||||
|
||||
if (!apiTopRelays.length) {
|
||||
return Promise.reject(`Couldn't fetch popular relays.`)
|
||||
}
|
||||
|
||||
if (store.getState().auth?.loggedIn) {
|
||||
store.dispatch(setMostPopularRelaysAction(apiTopRelays))
|
||||
}
|
||||
|
||||
return apiTopRelays
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets information about relays into relays.info app state.
|
||||
* @param relayURIs - relay URIs to get information about
|
||||
*/
|
||||
getRelayInfo = async (relayURIs: string[]) => {
|
||||
// initialize job request
|
||||
const jobEventTemplate: EventTemplate = {
|
||||
content: '',
|
||||
created_at: Math.round(Date.now() / 1000),
|
||||
kind: 68001,
|
||||
tags: [
|
||||
['i', `${JSON.stringify(relayURIs)}`],
|
||||
['j', 'relay-info']
|
||||
]
|
||||
}
|
||||
|
||||
// sign job request event
|
||||
const jobSignedEvent = await this.signEvent(jobEventTemplate)
|
||||
|
||||
const relays = [
|
||||
'wss://relay.damus.io',
|
||||
'wss://relay.primal.net',
|
||||
'wss://relayable.org'
|
||||
]
|
||||
|
||||
// publish job request
|
||||
await this.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)
|
||||
|
||||
if (!dvmJobResult) {
|
||||
return Promise.reject(`Relay(s) information wasn't received`)
|
||||
}
|
||||
|
||||
let relaysInfo: RelayInfoObject
|
||||
|
||||
try {
|
||||
relaysInfo = JSON.parse(dvmJobResult)
|
||||
} catch (error) {
|
||||
return Promise.reject(`Invalid relay(s) information.`)
|
||||
}
|
||||
|
||||
if (
|
||||
relaysInfo &&
|
||||
!compareObjects(store.getState().relays?.info, relaysInfo)
|
||||
) {
|
||||
store.dispatch(setRelayInfoAction(relaysInfo))
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Establishes connection to relays.
|
||||
* @param relayURIs - an array of relay URIs
|
||||
* @returns - promise that resolves into an array of connections
|
||||
*/
|
||||
connectToRelays = async (relayURIs: string[]) => {
|
||||
// Copy of relay connection status
|
||||
const relayConnectionsStatus: RelayConnectionStatus = JSON.parse(
|
||||
JSON.stringify(store.getState().relays?.connectionStatus || {})
|
||||
)
|
||||
|
||||
const connectedRelayURLs = this.connectedRelays
|
||||
? this.connectedRelays.map((relay) => relay.url)
|
||||
: []
|
||||
|
||||
// Check if connections already established
|
||||
if (compareObjects(connectedRelayURLs, relayURIs)) {
|
||||
return
|
||||
}
|
||||
|
||||
const connections = relayURIs
|
||||
.filter((relayURI) => !connectedRelayURLs.includes(relayURI))
|
||||
.map((relayURI) =>
|
||||
Relay.connect(relayURI)
|
||||
.then((relay) => {
|
||||
// put connection status into relayConnectionsStatus object
|
||||
relayConnectionsStatus[relayURI] = relay.connected
|
||||
? RelayConnectionState.Connected
|
||||
: RelayConnectionState.NotConnected
|
||||
|
||||
return relay
|
||||
})
|
||||
.catch(() => {
|
||||
relayConnectionsStatus[relayURI] = RelayConnectionState.NotConnected
|
||||
})
|
||||
)
|
||||
|
||||
const connected = await Promise.all(connections)
|
||||
|
||||
// put connected relays into connectedRelays private property, so it can be closed later
|
||||
this.connectedRelays = connected.filter(
|
||||
(relay) => relay instanceof Relay && relay.connected
|
||||
) as Relay[]
|
||||
|
||||
if (Object.keys(relayConnectionsStatus)) {
|
||||
if (
|
||||
!compareObjects(
|
||||
store.getState().relays?.connectionStatus,
|
||||
relayConnectionsStatus
|
||||
)
|
||||
) {
|
||||
store.dispatch(setRelayConnectionStatusAction(relayConnectionsStatus))
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.resolve(relayConnectionsStatus)
|
||||
}
|
||||
|
||||
/**
|
||||
* Disconnects from relays.
|
||||
* @param relayURIs - array of relay URIs to disconnect from
|
||||
*/
|
||||
disconnectFromRelays = async (relayURIs: string[]) => {
|
||||
const connectedRelayURLs = this.connectedRelays
|
||||
? this.connectedRelays.map((relay) => relay.url)
|
||||
: []
|
||||
|
||||
relayURIs
|
||||
.filter((relayURI) => connectedRelayURLs.includes(relayURI))
|
||||
.forEach((relayURI) => {
|
||||
if (this.connectedRelays) {
|
||||
const relay = this.connectedRelays.find(
|
||||
(relay) => relay.url === relayURI
|
||||
)
|
||||
|
||||
if (relay) {
|
||||
// close relay connection
|
||||
relay.close()
|
||||
|
||||
// remove relay from connectedRelays property
|
||||
this.connectedRelays = this.connectedRelays.filter(
|
||||
(relay) => relay.url !== relayURI
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (store.getState().relays?.connectionStatus) {
|
||||
const connectionStatus = JSON.parse(
|
||||
JSON.stringify(store.getState().relays?.connectionStatus)
|
||||
)
|
||||
|
||||
relayURIs.forEach((relay) => {
|
||||
delete connectionStatus[relay]
|
||||
})
|
||||
|
||||
if (
|
||||
!compareObjects(
|
||||
store.getState().relays?.connectionStatus,
|
||||
connectionStatus
|
||||
)
|
||||
) {
|
||||
// Update app state
|
||||
store.dispatch(setRelayConnectionStatusAction(connectionStatus))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
306
src/controllers/RelayController.ts
Normal file
@ -0,0 +1,306 @@
|
||||
import { Event, Filter, Relay } from 'nostr-tools'
|
||||
import {
|
||||
settleAllFullfilfedPromises,
|
||||
normalizeWebSocketURL,
|
||||
timeout
|
||||
} from '../utils'
|
||||
import { SIGIT_RELAY } from '../utils/const'
|
||||
|
||||
/**
|
||||
* Singleton class to manage relay operations.
|
||||
*/
|
||||
export class RelayController {
|
||||
private static instance: RelayController
|
||||
private pendingConnections = new Map<string, Promise<Relay | null>>() // Track pending connections
|
||||
public connectedRelays = new Map<string, Relay>()
|
||||
|
||||
private constructor() {}
|
||||
|
||||
/**
|
||||
* Provides the singleton instance of RelayController.
|
||||
*
|
||||
* @returns The singleton instance of RelayController.
|
||||
*/
|
||||
public static getInstance(): RelayController {
|
||||
if (!RelayController.instance) {
|
||||
RelayController.instance = new RelayController()
|
||||
}
|
||||
return RelayController.instance
|
||||
}
|
||||
|
||||
/**
|
||||
* Connects to a relay server if not already connected.
|
||||
*
|
||||
* This method checks if a relay with the given URL is already in the list of connected relays.
|
||||
* If it is not connected, it attempts to establish a new connection.
|
||||
* On successful connection, the relay is added to the list of connected relays and returned.
|
||||
* If the connection fails, an error is logged and `null` is returned.
|
||||
*
|
||||
* @param relayUrl - The URL of the relay server to connect to.
|
||||
* @returns A promise that resolves to the connected relay object if successful, or `null` if the connection fails.
|
||||
*/
|
||||
public connectRelay = async (relayUrl: string): Promise<Relay | null> => {
|
||||
const normalizedWebSocketURL = normalizeWebSocketURL(relayUrl)
|
||||
const relay = this.connectedRelays.get(normalizedWebSocketURL)
|
||||
|
||||
if (relay) {
|
||||
if (relay.connected) return relay
|
||||
|
||||
// If relay is found in connectedRelay map but not connected,
|
||||
// remove it from map and call connectRelay method again
|
||||
this.connectedRelays.delete(relayUrl)
|
||||
return this.connectRelay(relayUrl)
|
||||
}
|
||||
|
||||
// Check if there's already a pending connection for this relay URL
|
||||
if (this.pendingConnections.has(relayUrl)) {
|
||||
// Return the existing promise to avoid making another connection
|
||||
return this.pendingConnections.get(relayUrl)!
|
||||
}
|
||||
|
||||
// Create a new connection promise and store it in pendingConnections
|
||||
const connectionPromise = Relay.connect(relayUrl)
|
||||
.then((relay) => {
|
||||
if (relay.connected) {
|
||||
// Add the newly connected relay to the connected relays map
|
||||
this.connectedRelays.set(relayUrl, relay)
|
||||
|
||||
// Return the newly connected relay
|
||||
return relay
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
.catch((err) => {
|
||||
// Log an error message if the connection fails
|
||||
console.error(`Relay connection failed: ${relayUrl}`, err)
|
||||
|
||||
// Return null to indicate connection failure
|
||||
return null
|
||||
})
|
||||
.finally(() => {
|
||||
// Remove the connection from pendingConnections once it settles
|
||||
this.pendingConnections.delete(relayUrl)
|
||||
})
|
||||
|
||||
this.pendingConnections.set(relayUrl, connectionPromise)
|
||||
return connectionPromise
|
||||
}
|
||||
|
||||
/**
|
||||
* Asynchronously retrieves multiple event from a set of relays based on a provided filter.
|
||||
* If no relays are specified, it defaults to using connected relays.
|
||||
*
|
||||
* @param filter - The filter criteria to find the event.
|
||||
* @param relays - An optional array of relay URLs to search for the event.
|
||||
* @returns Returns a promise that resolves with an array of events.
|
||||
*/
|
||||
fetchEvents = async (
|
||||
filter: Filter,
|
||||
relayUrls: string[] = []
|
||||
): Promise<Event[]> => {
|
||||
if (!relayUrls.includes(SIGIT_RELAY)) {
|
||||
/**
|
||||
* NOTE: To avoid side-effects on external relayUrls array passed as argument
|
||||
* re-assigned relayUrls with added sigit relay instead of just appending to same array
|
||||
*/
|
||||
|
||||
relayUrls = [...relayUrls, SIGIT_RELAY] // Add app relay to relays array if not exists already
|
||||
}
|
||||
|
||||
// connect to all specified relays
|
||||
const relays = await settleAllFullfilfedPromises(
|
||||
relayUrls,
|
||||
this.connectRelay
|
||||
)
|
||||
|
||||
// Check if any relays are connected
|
||||
if (relays.length === 0) {
|
||||
throw new Error('No relay is connected to fetch events!')
|
||||
}
|
||||
|
||||
const events: Event[] = []
|
||||
const eventIds = new Set<string>() // To keep track of event IDs and avoid duplicates
|
||||
|
||||
// Create a promise for each relay subscription
|
||||
const subPromises = relays.map((relay) => {
|
||||
return new Promise<void>((resolve) => {
|
||||
if (!relay.connected) {
|
||||
console.log(`${relay.url} : Not connected!`, 'Skipping subscription')
|
||||
return resolve()
|
||||
}
|
||||
|
||||
// Subscribe to the relay with the specified filter
|
||||
const sub = relay.subscribe([filter], {
|
||||
// Handle incoming events
|
||||
onevent: (e) => {
|
||||
// Add the event to the array if it's not a duplicate
|
||||
if (!eventIds.has(e.id)) {
|
||||
eventIds.add(e.id) // Record the event ID
|
||||
events.push(e) // Add the event to the array
|
||||
}
|
||||
},
|
||||
// Handle the End-Of-Stream (EOSE) message
|
||||
oneose: () => {
|
||||
sub.close() // Close the subscription
|
||||
resolve() // Resolve the promise when EOSE is received
|
||||
}
|
||||
})
|
||||
|
||||
// add a 30 sec of timeout to subscription
|
||||
setTimeout(() => {
|
||||
if (!sub.closed) {
|
||||
sub.close()
|
||||
resolve()
|
||||
}
|
||||
}, 30 * 1000)
|
||||
})
|
||||
})
|
||||
|
||||
// Wait for all subscriptions to complete
|
||||
await Promise.allSettled(subPromises)
|
||||
|
||||
// It is possible that different relays will send different events and events array may contain more events then specified limit in filter
|
||||
// To fix this issue we'll first sort these events and then return only limited events
|
||||
if (filter.limit) {
|
||||
// Sort events by creation date in descending order
|
||||
events.sort((a, b) => b.created_at - a.created_at)
|
||||
|
||||
return events.slice(0, filter.limit)
|
||||
}
|
||||
|
||||
return events
|
||||
}
|
||||
|
||||
/**
|
||||
* Asynchronously retrieves an event from a set of relays based on a provided filter.
|
||||
* If no relays are specified, it defaults to using connected relays.
|
||||
*
|
||||
* @param filter - The filter criteria to find the event.
|
||||
* @param relays - An optional array of relay URLs to search for the event.
|
||||
* @returns Returns a promise that resolves to the found event or null if not found.
|
||||
*/
|
||||
fetchEvent = async (
|
||||
filter: Filter,
|
||||
relays: string[] = []
|
||||
): Promise<Event | null> => {
|
||||
const events = await this.fetchEvents(filter, relays)
|
||||
|
||||
// Sort events by creation date in descending order
|
||||
events.sort((a, b) => b.created_at - a.created_at)
|
||||
|
||||
// Return the most recent event, or null if no events were received
|
||||
return events[0] || null
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to events from multiple relays.
|
||||
*
|
||||
* This method connects to the specified relay URLs and subscribes to events
|
||||
* using the provided filter. It handles incoming events through the given
|
||||
* `eventHandler` callback and manages the subscription lifecycle.
|
||||
*
|
||||
* @param filter - The filter criteria to apply when subscribing to events.
|
||||
* @param relayUrls - An optional array of relay URLs to connect to. The default relay URL (`SIGIT_RELAY`) is added automatically.
|
||||
* @param eventHandler - A callback function to handle incoming events. It receives an `Event` object.
|
||||
*
|
||||
*/
|
||||
subscribeForEvents = async (
|
||||
filter: Filter,
|
||||
relayUrls: string[] = [],
|
||||
eventHandler: (event: Event) => void
|
||||
) => {
|
||||
if (!relayUrls.includes(SIGIT_RELAY)) {
|
||||
/**
|
||||
* NOTE: To avoid side-effects on external relayUrls array passed as argument
|
||||
* re-assigned relayUrls with added sigit relay instead of just appending to same array
|
||||
*/
|
||||
relayUrls = [...relayUrls, SIGIT_RELAY] // Add app relay to relays array if not exists already
|
||||
}
|
||||
|
||||
// connect to all specified relays
|
||||
const relays = await settleAllFullfilfedPromises(
|
||||
relayUrls,
|
||||
this.connectRelay
|
||||
)
|
||||
|
||||
// Check if any relays are connected
|
||||
if (relays.length === 0) {
|
||||
throw new Error('No relay is connected to fetch events!')
|
||||
}
|
||||
|
||||
const processedEvents: string[] = [] // To keep track of processed events
|
||||
|
||||
// Create a promise for each relay subscription
|
||||
const subPromises = relays.map((relay) => {
|
||||
return new Promise<void>((resolve) => {
|
||||
// Subscribe to the relay with the specified filter
|
||||
const sub = relay.subscribe([filter], {
|
||||
// Handle incoming events
|
||||
onevent: (e) => {
|
||||
// Process event only if it hasn't been processed before
|
||||
if (!processedEvents.includes(e.id)) {
|
||||
processedEvents.push(e.id)
|
||||
eventHandler(e) // Call the event handler with the event
|
||||
}
|
||||
},
|
||||
// Handle the End-Of-Stream (EOSE) message
|
||||
oneose: () => {
|
||||
sub.close() // Close the subscription
|
||||
resolve() // Resolve the promise when EOSE is received
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Wait for all subscriptions to complete
|
||||
await Promise.allSettled(subPromises)
|
||||
}
|
||||
|
||||
publish = async (
|
||||
event: Event,
|
||||
relayUrls: string[] = []
|
||||
): Promise<string[]> => {
|
||||
if (!relayUrls.includes(SIGIT_RELAY)) {
|
||||
/**
|
||||
* NOTE: To avoid side-effects on external relayUrls array passed as argument
|
||||
* re-assigned relayUrls with added sigit relay instead of just appending to same array
|
||||
*/
|
||||
relayUrls = [...relayUrls, SIGIT_RELAY] // Add app relay to relays array if not exists already
|
||||
}
|
||||
|
||||
// connect to all specified relays
|
||||
const relays = await settleAllFullfilfedPromises(
|
||||
relayUrls,
|
||||
this.connectRelay
|
||||
)
|
||||
|
||||
// Check if any relays are connected
|
||||
if (relays.length === 0) {
|
||||
throw new Error('No relay is connected to publish event!')
|
||||
}
|
||||
|
||||
const publishedOnRelays: string[] = [] // List to track which relays successfully published the event
|
||||
|
||||
// Create a promise for publishing the event to each connected relay
|
||||
const publishPromises = relays.map(async (relay) => {
|
||||
try {
|
||||
await Promise.race([
|
||||
relay.publish(event), // Publish the event to the relay
|
||||
timeout(20 * 1000) // Set a timeout to handle cases where publishing takes too long
|
||||
])
|
||||
publishedOnRelays.push(relay.url) // Add the relay URL to the list of successfully published relays
|
||||
} catch (err) {
|
||||
console.error(`Failed to publish event on relay: ${relay.url}`, err)
|
||||
}
|
||||
})
|
||||
|
||||
// Wait for all publish operations to complete (either fulfilled or rejected)
|
||||
await Promise.allSettled(publishPromises)
|
||||
|
||||
// Return the list of relay URLs where the event was published
|
||||
return publishedOnRelays
|
||||
}
|
||||
}
|
||||
|
||||
export const relayController = RelayController.getInstance()
|
@ -1,3 +1,4 @@
|
||||
export * from './AuthController'
|
||||
export * from './MetadataController'
|
||||
export * from './NostrController'
|
||||
export * from './RelayController'
|
||||
|
76
src/data/metaSamples.json
Normal file
@ -0,0 +1,76 @@
|
||||
{
|
||||
"creatorMetaExample": {
|
||||
"fileHashes": {
|
||||
"firstPdfFile.pdf": "da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05",
|
||||
"da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05/1.png": "hash123png1",
|
||||
"da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05/2.png": "hash321png2"
|
||||
},
|
||||
"markConfig": {
|
||||
"npub1x77qywdllzetv9ncnhlfpv62kshlgtt0uqlsq3v22uzzkk2xvvrsn6uyfy": {
|
||||
"da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05/1.png": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "FULLNAME",
|
||||
"markLocation": {
|
||||
"top": 56,
|
||||
"left": 306,
|
||||
"height": 200,
|
||||
"width": 100,
|
||||
"page": 1
|
||||
},
|
||||
"npub": "npub1x77qywdllzetv9ncnhlfpv62kshlgtt0uqlsq3v22uzzkk2xvvrsn6uyfy",
|
||||
"pdfFileHash": "da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05"
|
||||
}
|
||||
],
|
||||
"da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05/2.png": [
|
||||
{
|
||||
"id": 2,
|
||||
"markType": "FULLNAME",
|
||||
"location": {
|
||||
"top": 76,
|
||||
"left": 283,
|
||||
"height": 150,
|
||||
"width": 123,
|
||||
"page": 2
|
||||
},
|
||||
"npub": "npub1x77qywdllzetv9ncnhlfpv62kshlgtt0uqlsq3v22uzzkk2xvvrsn6uyfy",
|
||||
"pdfFileHash": "da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"docSignatureExample": {
|
||||
"prevSig": "10de030dd2bfafbbd34969645bd0b3f5e8ab71b3b32091fb29bbea5e272f8a3b7284ef667b6a02e9becc1036450d9fbe5c1c6d146fa91d70e0d8f3cd54d64f17",
|
||||
"marks": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "FULLNAME",
|
||||
"markLocation": {
|
||||
"top": 56,
|
||||
"left": 306,
|
||||
"height": 200,
|
||||
"width": 100,
|
||||
"page": 1
|
||||
},
|
||||
"npub": "npub1x77qywdllzetv9ncnhlfpv62kshlgtt0uqlsq3v22uzzkk2xvvrsn6uyfy",
|
||||
"pdfFileHash": "da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05",
|
||||
"value": "Pera Peric"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"markType": "FULLNAME",
|
||||
"location": {
|
||||
"top": 76,
|
||||
"left": 283,
|
||||
"height": 150,
|
||||
"width": 123,
|
||||
"page": 2
|
||||
},
|
||||
"npub": "npub1x77qywdllzetv9ncnhlfpv62kshlgtt0uqlsq3v22uzzkk2xvvrsn6uyfy",
|
||||
"pdfFileHash": "da5f857e77d3aa59c461efad804116931c059b36e6b4da0b5d9452753ec70c05",
|
||||
"value": "Pera Peric"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|