add: prettier to precommit; prettify everything

This commit is contained in:
danisharora099 2022-12-09 16:25:19 +05:30
parent c8f0b2c716
commit ad39ef04b4
No known key found for this signature in database
GPG Key ID: FBD2BF500037F135
14 changed files with 1066 additions and 520 deletions

1
.husky/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
_

4
.husky/pre-commit Executable file
View File

@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }

View File

@ -1,5 +1,16 @@
{ {
"dependencies": { "dependencies": {
"gh-pages": "^4.0.0" "gh-pages": "^4.0.0"
},
"devDependencies": {
"husky": "^8.0.0",
"prettier": "^2.8.1",
"pretty-quick": "^3.1.3"
},
"scripts": {
"prepare": "husky install"
},
"lint-staged": {
"*.{js,css,md,html}": "prettier --write"
} }
} }

607
pnpm-lock.yaml generated
View File

@ -2,70 +2,218 @@ lockfileVersion: 5.4
specifiers: specifiers:
gh-pages: ^4.0.0 gh-pages: ^4.0.0
husky: ^8.0.0
prettier: ^2.8.1
pretty-quick: ^3.1.3
dependencies: dependencies:
gh-pages: 4.0.0 gh-pages: 4.0.0
devDependencies:
husky: 8.0.2
prettier: 2.8.1
pretty-quick: 3.1.3_prettier@2.8.1
packages: packages:
/@types/minimatch/3.0.5:
resolution:
{
integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==,
}
dev: true
/ansi-styles/4.3.0:
resolution:
{
integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==,
}
engines: { node: ">=8" }
dependencies:
color-convert: 2.0.1
dev: true
/array-differ/3.0.0:
resolution:
{
integrity: sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==,
}
engines: { node: ">=8" }
dev: true
/array-union/1.0.2: /array-union/1.0.2:
resolution: {integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==,
}
engines: { node: ">=0.10.0" }
dependencies: dependencies:
array-uniq: 1.0.3 array-uniq: 1.0.3
dev: false dev: false
/array-union/2.1.0:
resolution:
{
integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==,
}
engines: { node: ">=8" }
dev: true
/array-uniq/1.0.3: /array-uniq/1.0.3:
resolution: {integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==,
}
engines: { node: ">=0.10.0" }
dev: false dev: false
/arrify/2.0.1:
resolution:
{
integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==,
}
engines: { node: ">=8" }
dev: true
/async/2.6.4: /async/2.6.4:
resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==} resolution:
{
integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==,
}
dependencies: dependencies:
lodash: 4.17.21 lodash: 4.17.21
dev: false dev: false
/balanced-match/1.0.2: /balanced-match/1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} resolution:
dev: false {
integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==,
}
/brace-expansion/1.1.11: /brace-expansion/1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} resolution:
{
integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==,
}
dependencies: dependencies:
balanced-match: 1.0.2 balanced-match: 1.0.2
concat-map: 0.0.1 concat-map: 0.0.1
dev: false
/chalk/3.0.0:
resolution:
{
integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==,
}
engines: { node: ">=8" }
dependencies:
ansi-styles: 4.3.0
supports-color: 7.2.0
dev: true
/color-convert/2.0.1:
resolution:
{
integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==,
}
engines: { node: ">=7.0.0" }
dependencies:
color-name: 1.1.4
dev: true
/color-name/1.1.4:
resolution:
{
integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==,
}
dev: true
/commander/2.20.3: /commander/2.20.3:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} resolution:
{
integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==,
}
dev: false dev: false
/commondir/1.0.1: /commondir/1.0.1:
resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} resolution:
{
integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==,
}
dev: false dev: false
/concat-map/0.0.1: /concat-map/0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} resolution:
dev: false {
integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==,
}
/cross-spawn/7.0.3:
resolution:
{
integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==,
}
engines: { node: ">= 8" }
dependencies:
path-key: 3.1.1
shebang-command: 2.0.0
which: 2.0.2
dev: true
/email-addresses/3.1.0: /email-addresses/3.1.0:
resolution: {integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==} resolution:
{
integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==,
}
dev: false dev: false
/end-of-stream/1.4.4:
resolution:
{
integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==,
}
dependencies:
once: 1.4.0
dev: true
/escape-string-regexp/1.0.5: /escape-string-regexp/1.0.5:
resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} resolution:
engines: {node: '>=0.8.0'} {
integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==,
}
engines: { node: ">=0.8.0" }
dev: false dev: false
/execa/4.1.0:
resolution:
{
integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==,
}
engines: { node: ">=10" }
dependencies:
cross-spawn: 7.0.3
get-stream: 5.2.0
human-signals: 1.1.1
is-stream: 2.0.1
merge-stream: 2.0.0
npm-run-path: 4.0.1
onetime: 5.1.2
signal-exit: 3.0.7
strip-final-newline: 2.0.0
dev: true
/filename-reserved-regex/2.0.0: /filename-reserved-regex/2.0.0:
resolution: {integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==} resolution:
engines: {node: '>=4'} {
integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==,
}
engines: { node: ">=4" }
dev: false dev: false
/filenamify/4.3.0: /filenamify/4.3.0:
resolution: {integrity: sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==} resolution:
engines: {node: '>=8'} {
integrity: sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==,
}
engines: { node: ">=8" }
dependencies: dependencies:
filename-reserved-regex: 2.0.0 filename-reserved-regex: 2.0.0
strip-outer: 1.0.1 strip-outer: 1.0.1
@ -73,8 +221,11 @@ packages:
dev: false dev: false
/find-cache-dir/3.3.2: /find-cache-dir/3.3.2:
resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==} resolution:
engines: {node: '>=8'} {
integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==,
}
engines: { node: ">=8" }
dependencies: dependencies:
commondir: 1.0.1 commondir: 1.0.1
make-dir: 3.1.0 make-dir: 3.1.0
@ -82,16 +233,21 @@ packages:
dev: false dev: false
/find-up/4.1.0: /find-up/4.1.0:
resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==} resolution:
engines: {node: '>=8'} {
integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==,
}
engines: { node: ">=8" }
dependencies: dependencies:
locate-path: 5.0.0 locate-path: 5.0.0
path-exists: 4.0.0 path-exists: 4.0.0
dev: false
/fs-extra/8.1.0: /fs-extra/8.1.0:
resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==} resolution:
engines: {node: '>=6 <7 || >=8'} {
integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==,
}
engines: { node: ">=6 <7 || >=8" }
dependencies: dependencies:
graceful-fs: 4.2.10 graceful-fs: 4.2.10
jsonfile: 4.0.0 jsonfile: 4.0.0
@ -99,12 +255,28 @@ packages:
dev: false dev: false
/fs.realpath/1.0.0: /fs.realpath/1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} resolution:
{
integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==,
}
dev: false dev: false
/get-stream/5.2.0:
resolution:
{
integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==,
}
engines: { node: ">=8" }
dependencies:
pump: 3.0.0
dev: true
/gh-pages/4.0.0: /gh-pages/4.0.0:
resolution: {integrity: sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==} resolution:
engines: {node: '>=10'} {
integrity: sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==,
}
engines: { node: ">=10" }
hasBin: true hasBin: true
dependencies: dependencies:
async: 2.6.4 async: 2.6.4
@ -117,7 +289,10 @@ packages:
dev: false dev: false
/glob/7.2.3: /glob/7.2.3:
resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} resolution:
{
integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==,
}
dependencies: dependencies:
fs.realpath: 1.0.0 fs.realpath: 1.0.0
inflight: 1.0.6 inflight: 1.0.6
@ -128,8 +303,11 @@ packages:
dev: false dev: false
/globby/6.1.0: /globby/6.1.0:
resolution: {integrity: sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==,
}
engines: { node: ">=0.10.0" }
dependencies: dependencies:
array-union: 1.0.2 array-union: 1.0.2
glob: 7.2.3 glob: 7.2.3
@ -139,138 +317,407 @@ packages:
dev: false dev: false
/graceful-fs/4.2.10: /graceful-fs/4.2.10:
resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==} resolution:
{
integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==,
}
dev: false dev: false
/has-flag/4.0.0:
resolution:
{
integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==,
}
engines: { node: ">=8" }
dev: true
/human-signals/1.1.1:
resolution:
{
integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==,
}
engines: { node: ">=8.12.0" }
dev: true
/husky/8.0.2:
resolution:
{
integrity: sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg==,
}
engines: { node: ">=14" }
hasBin: true
dev: true
/ignore/5.2.1:
resolution:
{
integrity: sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==,
}
engines: { node: ">= 4" }
dev: true
/inflight/1.0.6: /inflight/1.0.6:
resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} resolution:
{
integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==,
}
dependencies: dependencies:
once: 1.4.0 once: 1.4.0
wrappy: 1.0.2 wrappy: 1.0.2
dev: false dev: false
/inherits/2.0.4: /inherits/2.0.4:
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} resolution:
{
integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==,
}
dev: false dev: false
/is-stream/2.0.1:
resolution:
{
integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==,
}
engines: { node: ">=8" }
dev: true
/isexe/2.0.0:
resolution:
{
integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==,
}
dev: true
/jsonfile/4.0.0: /jsonfile/4.0.0:
resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} resolution:
{
integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==,
}
optionalDependencies: optionalDependencies:
graceful-fs: 4.2.10 graceful-fs: 4.2.10
dev: false dev: false
/locate-path/5.0.0: /locate-path/5.0.0:
resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==} resolution:
engines: {node: '>=8'} {
integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==,
}
engines: { node: ">=8" }
dependencies: dependencies:
p-locate: 4.1.0 p-locate: 4.1.0
dev: false
/lodash/4.17.21: /lodash/4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} resolution:
{
integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==,
}
dev: false dev: false
/make-dir/3.1.0: /make-dir/3.1.0:
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} resolution:
engines: {node: '>=8'} {
integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==,
}
engines: { node: ">=8" }
dependencies: dependencies:
semver: 6.3.0 semver: 6.3.0
dev: false dev: false
/merge-stream/2.0.0:
resolution:
{
integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==,
}
dev: true
/mimic-fn/2.1.0:
resolution:
{
integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==,
}
engines: { node: ">=6" }
dev: true
/minimatch/3.1.2: /minimatch/3.1.2:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} resolution:
{
integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==,
}
dependencies: dependencies:
brace-expansion: 1.1.11 brace-expansion: 1.1.11
dev: false
/mri/1.2.0:
resolution:
{
integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==,
}
engines: { node: ">=4" }
dev: true
/multimatch/4.0.0:
resolution:
{
integrity: sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==,
}
engines: { node: ">=8" }
dependencies:
"@types/minimatch": 3.0.5
array-differ: 3.0.0
array-union: 2.1.0
arrify: 2.0.1
minimatch: 3.1.2
dev: true
/npm-run-path/4.0.1:
resolution:
{
integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==,
}
engines: { node: ">=8" }
dependencies:
path-key: 3.1.1
dev: true
/object-assign/4.1.1: /object-assign/4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==,
}
engines: { node: ">=0.10.0" }
dev: false dev: false
/once/1.4.0: /once/1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} resolution:
{
integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==,
}
dependencies: dependencies:
wrappy: 1.0.2 wrappy: 1.0.2
dev: false
/onetime/5.1.2:
resolution:
{
integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==,
}
engines: { node: ">=6" }
dependencies:
mimic-fn: 2.1.0
dev: true
/p-limit/2.3.0: /p-limit/2.3.0:
resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==} resolution:
engines: {node: '>=6'} {
integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==,
}
engines: { node: ">=6" }
dependencies: dependencies:
p-try: 2.2.0 p-try: 2.2.0
dev: false
/p-locate/4.1.0: /p-locate/4.1.0:
resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==} resolution:
engines: {node: '>=8'} {
integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==,
}
engines: { node: ">=8" }
dependencies: dependencies:
p-limit: 2.3.0 p-limit: 2.3.0
dev: false
/p-try/2.2.0: /p-try/2.2.0:
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==} resolution:
engines: {node: '>=6'} {
dev: false integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==,
}
engines: { node: ">=6" }
/path-exists/4.0.0: /path-exists/4.0.0:
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} resolution:
engines: {node: '>=8'} {
dev: false integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==,
}
engines: { node: ">=8" }
/path-is-absolute/1.0.1: /path-is-absolute/1.0.1:
resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==,
}
engines: { node: ">=0.10.0" }
dev: false dev: false
/path-key/3.1.1:
resolution:
{
integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==,
}
engines: { node: ">=8" }
dev: true
/pify/2.3.0: /pify/2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==,
}
engines: { node: ">=0.10.0" }
dev: false dev: false
/pinkie-promise/2.0.1: /pinkie-promise/2.0.1:
resolution: {integrity: sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==,
}
engines: { node: ">=0.10.0" }
dependencies: dependencies:
pinkie: 2.0.4 pinkie: 2.0.4
dev: false dev: false
/pinkie/2.0.4: /pinkie/2.0.4:
resolution: {integrity: sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==,
}
engines: { node: ">=0.10.0" }
dev: false dev: false
/pkg-dir/4.2.0: /pkg-dir/4.2.0:
resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==} resolution:
engines: {node: '>=8'} {
integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==,
}
engines: { node: ">=8" }
dependencies: dependencies:
find-up: 4.1.0 find-up: 4.1.0
dev: false dev: false
/prettier/2.8.1:
resolution:
{
integrity: sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==,
}
engines: { node: ">=10.13.0" }
hasBin: true
dev: true
/pretty-quick/3.1.3_prettier@2.8.1:
resolution:
{
integrity: sha512-kOCi2FJabvuh1as9enxYmrnBC6tVMoVOenMaBqRfsvBHB0cbpYHjdQEpSglpASDFEXVwplpcGR4CLEaisYAFcA==,
}
engines: { node: ">=10.13" }
hasBin: true
peerDependencies:
prettier: ">=2.0.0"
dependencies:
chalk: 3.0.0
execa: 4.1.0
find-up: 4.1.0
ignore: 5.2.1
mri: 1.2.0
multimatch: 4.0.0
prettier: 2.8.1
dev: true
/pump/3.0.0:
resolution:
{
integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==,
}
dependencies:
end-of-stream: 1.4.4
once: 1.4.0
dev: true
/semver/6.3.0: /semver/6.3.0:
resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==} resolution:
{
integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==,
}
hasBin: true hasBin: true
dev: false dev: false
/shebang-command/2.0.0:
resolution:
{
integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==,
}
engines: { node: ">=8" }
dependencies:
shebang-regex: 3.0.0
dev: true
/shebang-regex/3.0.0:
resolution:
{
integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==,
}
engines: { node: ">=8" }
dev: true
/signal-exit/3.0.7:
resolution:
{
integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==,
}
dev: true
/strip-final-newline/2.0.0:
resolution:
{
integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==,
}
engines: { node: ">=6" }
dev: true
/strip-outer/1.0.1: /strip-outer/1.0.1:
resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==,
}
engines: { node: ">=0.10.0" }
dependencies: dependencies:
escape-string-regexp: 1.0.5 escape-string-regexp: 1.0.5
dev: false dev: false
/supports-color/7.2.0:
resolution:
{
integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==,
}
engines: { node: ">=8" }
dependencies:
has-flag: 4.0.0
dev: true
/trim-repeated/1.0.0: /trim-repeated/1.0.0:
resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==} resolution:
engines: {node: '>=0.10.0'} {
integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==,
}
engines: { node: ">=0.10.0" }
dependencies: dependencies:
escape-string-regexp: 1.0.5 escape-string-regexp: 1.0.5
dev: false dev: false
/universalify/0.1.2: /universalify/0.1.2:
resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} resolution:
engines: {node: '>= 4.0.0'} {
integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==,
}
engines: { node: ">= 4.0.0" }
dev: false dev: false
/which/2.0.2:
resolution:
{
integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==,
}
engines: { node: ">= 8" }
hasBin: true
dependencies:
isexe: 2.0.0
dev: true
/wrappy/1.0.2: /wrappy/1.0.2:
resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} resolution:
dev: false {
integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==,
}

View File

@ -1,4 +1,6 @@
<button (click)="sendMessage()" [disabled]="wakuStatus !== 'Connected'">Send Message</button> <button (click)="sendMessage()" [disabled]="wakuStatus !== 'Connected'">
Send Message
</button>
<h2>Messages</h2> <h2>Messages</h2>
<ul class="messages"> <ul class="messages">
<li *ngFor="let message of messages"> <li *ngFor="let message of messages">

View File

@ -1,13 +1,13 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>RelayAngularChat</title> <title>RelayAngularChat</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

View File

@ -1,75 +1,85 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset='UTF-8'/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>JS-Waku Chat</title> <title>JS-Waku Chat</title>
</head> </head>
<body> <body>
<div><h1>Waku Node Status</h1></div>
<div id="status"></div>
<div><h1>Waku Node Status</h1></div> <label for="textInput">Message text</label>
<div id='status'></div> <input
disabled
id="textInput"
placeholder="Type your message here"
type="text"
/>
<button disabled id="sendButton" type="button">
Send Message using Relay
</button>
<label for='textInput'>Message text</label> <div><h1>Messages</h1></div>
<input disabled id='textInput' placeholder='Type your message here' type='text'> <div id="messages"></div>
<button disabled id='sendButton' type='button'>Send Message using Relay</button>
<div><h1>Messages</h1></div> <script type="module">
<div id='messages'></div> /**
* Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages.
* Recommended payload is protobuf. Using simple utf-8 string for demo purposes only.
*/
import {
bytesToUtf8,
utf8ToBytes,
} from "https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js";
import { createPrivacyNode } from "https://unpkg.com/@waku/create@0.0.4/bundle/index.js";
import { waitForRemotePeer } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js";
import {
DecoderV0,
EncoderV0,
} from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
<script type='module'> const statusDiv = document.getElementById("status");
/** const messagesDiv = document.getElementById("messages");
* Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages. const textInput = document.getElementById("textInput");
* Recommended payload is protobuf. Using simple utf-8 string for demo purposes only. const sendButton = document.getElementById("sendButton");
*/
import {bytesToUtf8, utf8ToBytes} from 'https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js'; // Every Waku Message has a content topic that categorizes it.
import {createPrivacyNode} from 'https://unpkg.com/@waku/create@0.0.4/bundle/index.js' // It is always encoded in clear text.
import {waitForRemotePeer} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js' // Recommendation: `/dapp-name/version/functionality/codec`
import {DecoderV0, EncoderV0} from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js"; // We recommend to use protobuf as codec (`proto`), this demo uses utf-8
// for simplicity's sake.
const contentTopic = "/js-waku-examples/1/chat/utf8";
const statusDiv = document.getElementById('status'); // Prepare encoder and decoder, `V0` for clear text messages.
const messagesDiv = document.getElementById('messages');
const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton');
// Every Waku Message has a content topic that categorizes it. const encoder = new EncoderV0(contentTopic);
// It is always encoded in clear text. const decoder = new DecoderV0(contentTopic);
// Recommendation: `/dapp-name/version/functionality/codec`
// We recommend to use protobuf as codec (`proto`), this demo uses utf-8
// for simplicity's sake.
const contentTopic = '/js-waku-examples/1/chat/utf8';
// Prepare encoder and decoder, `V0` for clear text messages. try {
statusDiv.innerHTML = "<p>Starting</p>";
const encoder = new EncoderV0(contentTopic);
const decoder = new DecoderV0(contentTopic);
try {
statusDiv.innerHTML = '<p>Starting</p>';
// Create and starts a Waku node. // Create and starts a Waku node.
// `default: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes. // `default: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes.
// We are currently working on migrating this method to DNS Discovery. // We are currently working on migrating this method to DNS Discovery.
// //
// https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html // https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html
const waku = await createPrivacyNode({defaultBootstrap: true}); const waku = await createPrivacyNode({ defaultBootstrap: true });
await waku.start(); await waku.start();
// Add a hook to process all incoming messages on a specified content topic. // Add a hook to process all incoming messages on a specified content topic.
// //
// https://js.waku.org/classes/index.waku_relay.WakuRelay.html#addObserver // https://js.waku.org/classes/index.waku_relay.WakuRelay.html#addObserver
waku.relay.addObserver(decoder, (message) => { waku.relay.addObserver(
decoder,
(message) => {
// Checks there is a payload on the message. // Checks there is a payload on the message.
// Waku Message is encoded in protobuf, in proto v3 fields are always optional. // Waku Message is encoded in protobuf, in proto v3 fields are always optional.
// //
// https://js.waku.org/interfaces/index.proto_message.WakuMessage-1.html#payload // https://js.waku.org/interfaces/index.proto_message.WakuMessage-1.html#payload
if (!message.payload) if (!message.payload) return;
return;
// Helper method to decode the payload to utf-8. A production dApp should // Helper method to decode the payload to utf-8. A production dApp should
// use `wakuMessage.payload` (Uint8Array) which enables encoding a data // use `wakuMessage.payload` (Uint8Array) which enables encoding a data
@ -77,10 +87,13 @@
// //
// https://js.waku.org/functions/index.utils.bytesToUtf8.html // https://js.waku.org/functions/index.utils.bytesToUtf8.html
const text = bytesToUtf8(message.payload); const text = bytesToUtf8(message.payload);
messagesDiv.innerHTML = `<p>${text}</p><br />` + messagesDiv.innerHTML; messagesDiv.innerHTML =
}, [contentTopic]); `<p>${text}</p><br />` + messagesDiv.innerHTML;
},
[contentTopic]
);
statusDiv.innerHTML = '<p>Connecting to a peer</p>'; statusDiv.innerHTML = "<p>Connecting to a peer</p>";
// Best effort method that waits for the Waku node to be connected to remote // Best effort method that waits for the Waku node to be connected to remote
// waku nodes (peers) and for appropriate handshakes to be done. // waku nodes (peers) and for appropriate handshakes to be done.
@ -92,24 +105,22 @@
// function that sends the text input over Waku Relay, the gossipsub // function that sends the text input over Waku Relay, the gossipsub
// protocol. // protocol.
sendButton.onclick = async () => { sendButton.onclick = async () => {
const payload = utf8ToBytes(textInput.value) const payload = utf8ToBytes(textInput.value);
await waku.relay.send(encoder, {payload}); await waku.relay.send(encoder, { payload });
console.log('Message sent!'); console.log("Message sent!");
// Reset the text input. // Reset the text input.
textInput.value = null; textInput.value = null;
}; };
// Ready to send & receive messages, enable text input. // Ready to send & receive messages, enable text input.
textInput.disabled = false; textInput.disabled = false;
sendButton.disabled = false; sendButton.disabled = false;
statusDiv.innerHTML = '<p>Ready!</p>'; statusDiv.innerHTML = "<p>Ready!</p>";
} catch (e) {
} catch (e) { statusDiv.innerHTML = "Failed to start application";
statusDiv.innerHTML = 'Failed to start application';
console.log(e); console.log(e);
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }

View File

@ -1,457 +1,524 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset='UTF-8'/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>JS-Waku light node example</title> <title>JS-Waku light node example</title>
<link href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" rel="stylesheet"> <link
<link href="style.css" rel="stylesheet"> href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
</head> rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
</head>
<body> <body>
<div class="row rcenter">
<h1>Waku RLN</h1>
<button id="connect-wallet" type="button">Connect Wallet</button>
</div>
<div class="row rcenter"> <span id="status"></span>
<h1>Waku RLN</h1>
<button id='connect-wallet' type='button'>Connect Wallet</button>
</div>
<span id='status'></span> <h2 class="mu1">Blockchain</h2>
<hr />
<h2 class="mu1">Blockchain</h2> <div class="row rcenter">
<hr/> <h4>Address</h4>
<code class="value" id="address"></code>
</div>
<div class="row rcenter"> <div class="row mu1 rcenter">
<h4>Address</h4> <h4>Contract Data</h4>
<code class="value" id="address"></code> <button disabled id="retrieve-rln-details" type="button">
</div>
<div class="row mu1 rcenter">
<h4>Contract Data</h4>
<button disabled id='retrieve-rln-details' type='button'>
Retrieve contract state from blockchain Retrieve contract state from blockchain
</button> </button>
</div> </div>
<div class="row rcenter"> <div class="row rcenter">
<h4>Latest membership id on contract</h4> <h4>Latest membership id on contract</h4>
<code class="value" id="latest-membership-id">Not loaded yet</code> <code class="value" id="latest-membership-id">Not loaded yet</code>
</div> </div>
<h2 class="mu1">Credentials</h2>
<hr />
<h2 class="mu1">Credentials</h2> <div class="row">
<hr/> <div class="w50">
<div class="row">
<div class="w50">
<h4>You can either generate new credentials:</h4> <h4>You can either generate new credentials:</h4>
<button disabled id='generate-credentials' type='button'>Generate RLN Credentials</button> <button disabled id="generate-credentials" type="button">
<br/> Generate RLN Credentials
<br/> </button>
<button disabled id='register-button' type='button'>Register Credentials in Contract</button> <br />
</div> <br />
<div class="w50"> <button disabled id="register-button" type="button">
Register Credentials in Contract
</button>
</div>
<div class="w50">
<h4>Or import existing ones:</h4> <h4>Or import existing ones:</h4>
<label for="membership-id">Membership ID (your index in the RLN smart contract):</label> <label for="membership-id"
<input id="membership-id" name="membership-id" type="text"/> >Membership ID (your index in the RLN smart contract):</label
>
<input id="membership-id" name="membership-id" type="text" />
<label for="id-key">RLN Identity Key (hex string):</label> <label for="id-key">RLN Identity Key (hex string):</label>
<input id="id-key" name="id-key" type="text"/> <input id="id-key" name="id-key" type="text" />
<label for="commitment-key">RLN Commitment Key (hex string):</label> <label for="commitment-key">RLN Commitment Key (hex string):</label>
<input id="commitment-key" name="commitment-key" type="text"/> <input id="commitment-key" name="commitment-key" type="text" />
<button disabled id='import-button' type='button'>Import RLN Credentials</button> <button disabled id="import-button" type="button">
Import RLN Credentials
</button>
</div>
</div>
<div class="row rcenter mu1">
<h4>Membership id</h4>
<code class="value" id="id">none</code>
</div>
<div class="row rcenter">
<h4>Key</h4>
<code class="value" id="key">none</code>
</div>
<div class="row rcenter">
<h4>Commitment</h4>
<code class="value" id="commitment">none</code>
</div> </div>
</div>
<div class="row rcenter mu1">
<h4>Membership id</h4>
<code class="value" id="id">none</code>
</div>
<div class="row rcenter">
<h4>Key</h4>
<code class="value" id="key">none</code>
</div>
<div class="row rcenter">
<h4>Commitment</h4>
<code class="value" id="commitment">none</code>
</div>
<h2 class="mu1">Waku</h2>
<hr />
<div id="waku-status"></div>
<h2 class="mu1">Waku</h2> <div class="row rcenter mu1 mf">
<hr/> <label for="remote-multiaddr">Remote peer's multiaddr</label>
<div id="waku-status"></div> <input
id="remote-multiaddr"
type="text"
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
/>
<button disabled id="dial" type="button">Dial</button>
</div>
<div class="row rcenter mu1 mf"> <div class="row rcenter mf">
<label for='remote-multiaddr'>Remote peer's multiaddr</label> <label for="nick-input">Your nickname</label>
<input id='remote-multiaddr' <input
type='text' class="p100"
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"> id="nick-input"
<button disabled id='dial' type='button'>Dial</button> placeholder="Choose a nickname"
</div> type="text"
/>
</div>
<div class="row rcenter mf"> <div class="row rcenter mf">
<label for='nick-input'>Your nickname</label> <label for="textInput">Message text</label>
<input class="p100" id='nick-input' placeholder='Choose a nickname' type='text'> <input
</div> class="p100"
disabled
id="textInput"
placeholder="Type your message here"
type="text"
/>
<button disabled id="sendButton" type="button">
Send message using Light Push
</button>
</div>
<span id="sending-status"></span>
<div class="row rcenter mf"> <h4 class="mu1">Messages</h4>
<label for='textInput'>Message text</label> <div id="messages"></div>
<input class="p100" disabled id='textInput' placeholder='Type your message here' type='text'>
<button disabled id='sendButton' type='button'>Send message using Light Push</button>
</div>
<span id='sending-status'></span>
<h4 class="mu1">Messages</h4> <script type="module">
<div id="messages"></div> import { utils } from "https://unpkg.com/js-waku@0.30.0/bundle/index.js";
import { createLightNode } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/create_waku.js";
<script type='module'> import { waitForRemotePeer } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/wait_for_remote_peer.js";
import {utils} from 'https://unpkg.com/js-waku@0.30.0/bundle/index.js'; import {
import {createLightNode} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/create_waku.js'
import {waitForRemotePeer} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/wait_for_remote_peer.js'
import {
EncoderV0, EncoderV0,
DecoderV0 DecoderV0,
} from 'https://unpkg.com/js-waku@0.30.0/bundle/lib/waku_message/version_0.js' } from "https://unpkg.com/js-waku@0.30.0/bundle/lib/waku_message/version_0.js";
import {protobuf} from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js"; import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js";
import { import {
create, create,
MembershipKey, MembershipKey,
RLNDecoder, RLNDecoder,
RLNEncoder RLNEncoder,
} from "https://unpkg.com/@waku/rln@0.0.12-6875952/bundle/index.js"; } from "https://unpkg.com/@waku/rln@0.0.12-6875952/bundle/index.js";
import {ethers} from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js" import { ethers } from "https://unpkg.com/ethers@5.7.2/dist/ethers.esm.min.js";
const statusSpan = document.getElementById('status') const statusSpan = document.getElementById("status");
// Blockchain Elements // Blockchain Elements
const addressDiv = document.getElementById('address'); const addressDiv = document.getElementById("address");
const connectWalletButton = document.getElementById('connect-wallet'); const connectWalletButton = document.getElementById("connect-wallet");
const latestMembershipSpan = document.getElementById('latest-membership-id') const latestMembershipSpan = document.getElementById(
const retrieveRLNDetailsButton = document.getElementById('retrieve-rln-details') "latest-membership-id"
);
const retrieveRLNDetailsButton = document.getElementById(
"retrieve-rln-details"
);
// Credentials Elements // Credentials Elements
const generateCredsButton = document.getElementById('generate-credentials') const generateCredsButton = document.getElementById(
"generate-credentials"
);
const membershipIdInput = document.getElementById('membership-id') const membershipIdInput = document.getElementById("membership-id");
const identityKeyInput = document.getElementById('id-key') const identityKeyInput = document.getElementById("id-key");
const commitmentKeyInput = document.getElementById('commitment-key') const commitmentKeyInput = document.getElementById("commitment-key");
const importButton = document.getElementById('import-button') const importButton = document.getElementById("import-button");
const idDiv = document.getElementById('id'); const idDiv = document.getElementById("id");
const keyDiv = document.getElementById('key'); const keyDiv = document.getElementById("key");
const commitmentDiv = document.getElementById('commitment'); const commitmentDiv = document.getElementById("commitment");
const registerButton = document.getElementById('register-button'); const registerButton = document.getElementById("register-button");
// Waku Elements // Waku Elements
const statusDiv = document.getElementById('waku-status'); const statusDiv = document.getElementById("waku-status");
const remoteMultiAddrInput = document.getElementById('remote-multiaddr') const remoteMultiAddrInput = document.getElementById("remote-multiaddr");
const dialButton = document.getElementById('dial') const dialButton = document.getElementById("dial");
const nicknameInput = document.getElementById('nick-input') const nicknameInput = document.getElementById("nick-input");
const textInput = document.getElementById('textInput'); const textInput = document.getElementById("textInput");
const sendButton = document.getElementById('sendButton'); const sendButton = document.getElementById("sendButton");
const sendingStatusSpan = document.getElementById('sending-status'); const sendingStatusSpan = document.getElementById("sending-status");
const messagesDiv = document.getElementById('messages') const messagesDiv = document.getElementById("messages");
let membershipId, membershipKey, encoder, node, nodeConnected, rlnInstance; let membershipId,
let retrievedRLNEvents = false; membershipKey,
const rlnInstancePromise = create(); encoder,
node,
nodeConnected,
rlnInstance;
let retrievedRLNEvents = false;
const rlnInstancePromise = create();
// Load zero-kit WASM blob. // Load zero-kit WASM blob.
statusSpan.innerText = 'WASM Blob download in progress...' statusSpan.innerText = "WASM Blob download in progress...";
rlnInstancePromise.then((_rlnInstance) => { rlnInstancePromise.then((_rlnInstance) => {
rlnInstance = _rlnInstance rlnInstance = _rlnInstance;
statusSpan.innerText = 'WASM Blob download in progress... done!' statusSpan.innerText = "WASM Blob download in progress... done!";
updateFields() updateFields();
}) });
const ContentTopic = "/toy-chat/2/luzhou/proto"; const ContentTopic = "/toy-chat/2/luzhou/proto";
// Protobuf // Protobuf
const ProtoChatMessage = new protobuf.Type("ChatMessage") const ProtoChatMessage = new protobuf.Type("ChatMessage")
.add(new protobuf.Field("timestamp", 1, "uint64")) .add(new protobuf.Field("timestamp", 1, "uint64"))
.add(new protobuf.Field("nick", 2, "string")) .add(new protobuf.Field("nick", 2, "string"))
.add(new protobuf.Field("text", 3, "bytes")); .add(new protobuf.Field("text", 3, "bytes"));
// Function to update the fields to guide the user by disabling buttons. // Function to update the fields to guide the user by disabling buttons.
const updateFields = () => { const updateFields = () => {
if (membershipKey) { if (membershipKey) {
keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey) keyDiv.innerHTML = utils.bytesToHex(membershipKey.IDKey);
commitmentDiv.innerHTML = utils.bytesToHex(membershipKey.IDCommitment) commitmentDiv.innerHTML = utils.bytesToHex(
idDiv.innerHTML = membershipId || "not registered yet" membershipKey.IDCommitment
);
idDiv.innerHTML = membershipId || "not registered yet";
if (membershipId && rlnInstance) { if (membershipId && rlnInstance) {
encoder = new RLNEncoder( encoder = new RLNEncoder(
new EncoderV0(ContentTopic), new EncoderV0(ContentTopic),
rlnInstance, rlnInstance,
membershipId, membershipId,
membershipKey membershipKey
); );
} }
} }
generateCredsButton.disabled = !rlnInstance generateCredsButton.disabled = !rlnInstance;
registerButton.disabled = !(membershipKey && retrievedRLNEvents && !membershipId) registerButton.disabled = !(
membershipKey &&
retrievedRLNEvents &&
!membershipId
);
importButton.disabled = !(membershipIdInput.value importButton.disabled = !(
&& identityKeyInput.value membershipIdInput.value &&
&& commitmentKeyInput.value); identityKeyInput.value &&
commitmentKeyInput.value
);
const readyToSend = (membershipKey && membershipId && nodeConnected && nicknameInput.value) const readyToSend =
membershipKey && membershipId && nodeConnected && nicknameInput.value;
textInput.disabled = !readyToSend; textInput.disabled = !readyToSend;
sendButton.disabled = !readyToSend; sendButton.disabled = !readyToSend;
dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents) dialButton.disabled = !(node && node.isStarted() && retrievedRLNEvents);
retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents; retrieveRLNDetailsButton.disabled = !rlnInstance || retrievedRLNEvents;
} };
// Blockchain // Blockchain
generateCredsButton.onclick = () => { generateCredsButton.onclick = () => {
membershipKey = rlnInstance.generateMembershipKey() membershipKey = rlnInstance.generateMembershipKey();
updateFields(); updateFields();
} };
membershipIdInput.onchange = updateFields; membershipIdInput.onchange = updateFields;
identityKeyInput.onchange = updateFields; identityKeyInput.onchange = updateFields;
commitmentKeyInput.onchange = updateFields; commitmentKeyInput.onchange = updateFields;
importButton.onclick = () => { importButton.onclick = () => {
const idKey = utils.hexToBytes(identityKeyInput.value) const idKey = utils.hexToBytes(identityKeyInput.value);
const idCommitment = utils.hexToBytes(commitmentKeyInput.value) const idCommitment = utils.hexToBytes(commitmentKeyInput.value);
membershipKey = new MembershipKey(idKey, idCommitment) membershipKey = new MembershipKey(idKey, idCommitment);
membershipId = membershipIdInput.value; membershipId = membershipIdInput.value;
updateFields() updateFields();
} };
const checkChain = async (chainId) => { const checkChain = async (chainId) => {
retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5; retrieveRLNDetailsButton.disabled = retrievedRLNEvents || chainId !== 5;
registerButton.disabled = !(chainId === 5 && retrievedRLNEvents); registerButton.disabled = !(chainId === 5 && retrievedRLNEvents);
if (chainId !== 5) { if (chainId !== 5) {
alert("Switch to Goerli") alert("Switch to Goerli");
} }
} };
const rlnDeployBlk = 7109391; const rlnDeployBlk = 7109391;
const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6"; const rlnAddress = "0x4252105670fe33d2947e8ead304969849e64f2a6";
const rlnAbi = [ const rlnAbi = [
"function MEMBERSHIP_DEPOSIT() public view returns(uint256)", "function MEMBERSHIP_DEPOSIT() public view returns(uint256)",
"function register(uint256 pubkey) external payable", "function register(uint256 pubkey) external payable",
"function withdraw(uint256 secret, uint256 _pubkeyIndex, address payable receiver) external", "function withdraw(uint256 secret, uint256 _pubkeyIndex, address payable receiver) external",
"event MemberRegistered(uint256 pubkey, uint256 index)", "event MemberRegistered(uint256 pubkey, uint256 index)",
"event MemberWithdrawn(uint256 pubkey, uint256 index)" "event MemberWithdrawn(uint256 pubkey, uint256 index)",
]; ];
const provider = new ethers.providers.Web3Provider(window.ethereum, "any"); const provider = new ethers.providers.Web3Provider(
window.ethereum,
"any"
);
let accounts; let accounts;
let rlnContract; let rlnContract;
const handleMembership = (pubkey, index) => { const handleMembership = (pubkey, index) => {
try { try {
const idCommitment = ethers.utils.zeroPad(ethers.utils.arrayify(pubkey), 32); const idCommitment = ethers.utils.zeroPad(
rlnInstance.insertMember(idCommitment); ethers.utils.arrayify(pubkey),
const indexInt = index.toNumber() 32
if (!latestMembershipSpan.innerText || indexInt > latestMembershipSpan.innerText) { );
latestMembershipSpan.innerText = indexInt rlnInstance.insertMember(idCommitment);
} const indexInt = index.toNumber();
console.debug("IDCommitment registered in tree", idCommitment, indexInt); if (
latestMembershipSpan.innerHTML = indexInt; !latestMembershipSpan.innerText ||
indexInt > latestMembershipSpan.innerText
) {
latestMembershipSpan.innerText = indexInt;
}
console.debug(
"IDCommitment registered in tree",
idCommitment,
indexInt
);
latestMembershipSpan.innerHTML = indexInt;
} catch (err) { } catch (err) {
console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled console.error(err); // TODO: the merkle tree can be in a wrong state. The app should be disabled
} }
} };
const setAccounts = acc => { const setAccounts = (acc) => {
accounts = acc; accounts = acc;
addressDiv.innerHTML = accounts.length ? accounts[0] : ""; addressDiv.innerHTML = accounts.length ? accounts[0] : "";
} };
connectWalletButton.onclick = async () => { connectWalletButton.onclick = async () => {
try { try {
accounts = await provider.send("eth_requestAccounts", []); accounts = await provider.send("eth_requestAccounts", []);
setAccounts(accounts); setAccounts(accounts);
const network = await provider.getNetwork(); const network = await provider.getNetwork();
checkChain(network.chainId); checkChain(network.chainId);
} catch (e) { } catch (e) {
console.log("No web3 provider available", e); console.log("No web3 provider available", e);
} }
}; };
retrieveRLNDetailsButton.onclick = async () => { retrieveRLNDetailsButton.onclick = async () => {
rlnContract = new ethers.Contract(rlnAddress, rlnAbi, provider); rlnContract = new ethers.Contract(rlnAddress, rlnAbi, provider);
const filter = rlnContract.filters.MemberRegistered() const filter = rlnContract.filters.MemberRegistered();
// populating merkle tree: // populating merkle tree:
const alreadyRegisteredMembers = await rlnContract.queryFilter(filter, rlnDeployBlk) const alreadyRegisteredMembers = await rlnContract.queryFilter(
alreadyRegisteredMembers.forEach(event => { filter,
handleMembership(event.args.pubkey, event.args.index, event); rlnDeployBlk
);
alreadyRegisteredMembers.forEach((event) => {
handleMembership(event.args.pubkey, event.args.index, event);
}); });
retrievedRLNEvents = true; retrievedRLNEvents = true;
// reacting to new registrations // reacting to new registrations
rlnContract.on(filter, (pubkey, index, event) => { rlnContract.on(filter, (pubkey, index, event) => {
handleMembership(event.args.pubkey, event.args.index, event); handleMembership(event.args.pubkey, event.args.index, event);
}); });
updateFields() updateFields();
} };
window.ethereum.on('accountsChanged', setAccounts); window.ethereum.on("accountsChanged", setAccounts);
window.ethereum.on('chainChanged', chainId => { window.ethereum.on("chainChanged", (chainId) => {
checkChain(parseInt(chainId, 16)); checkChain(parseInt(chainId, 16));
}); });
registerButton.onclick = async () => { registerButton.onclick = async () => {
try { try {
registerButton.disabled = true; registerButton.disabled = true;
const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment); const pubkey = ethers.BigNumber.from(membershipKey.IDCommitment);
const price = await rlnContract.MEMBERSHIP_DEPOSIT(); const price = await rlnContract.MEMBERSHIP_DEPOSIT();
const signer = provider.getSigner() const signer = provider.getSigner();
const rlnContractWithSigner = rlnContract.connect(signer); const rlnContractWithSigner = rlnContract.connect(signer);
const txResponse = await rlnContractWithSigner.register(pubkey, {value: price}); const txResponse = await rlnContractWithSigner.register(pubkey, {
console.log("Transaction broadcasted:", txResponse); value: price,
});
console.log("Transaction broadcasted:", txResponse);
const txReceipt = await txResponse.wait(); const txReceipt = await txResponse.wait();
console.log("Transaction receipt", txReceipt); console.log("Transaction receipt", txReceipt);
// Update membershipId // Update membershipId
membershipId = txReceipt.events[0].args.index.toNumber(); membershipId = txReceipt.events[0].args.index.toNumber();
console.log("Obtained index for current membership credentials", membershipId); console.log(
updateFields(); "Obtained index for current membership credentials",
registerButton.disabled = false; membershipId
);
updateFields();
registerButton.disabled = false;
} catch (err) { } catch (err) {
alert(err); alert(err);
registerButton.disabled = false; registerButton.disabled = false;
} }
};
} // Waku
nicknameInput.onchange = updateFields;
nicknameInput.onblur = updateFields;
// Waku let messages = [];
nicknameInput.onchange = updateFields
nicknameInput.onblur = updateFields;
let messages = []; const updateMessages = () => {
messagesDiv.innerHTML = "<ul>";
messages.forEach((msg) => {
messagesDiv.innerHTML += `<li>${msg.msg} - [epoch: ${msg.epoch}, proof: ${msg.proofState} ]</li>`;
const updateMessages = () => { if (msg.proofState === "verifying...") {
messagesDiv.innerHTML = "<ul>" try {
messages.forEach(msg => { console.log("Verifying proof without roots");
messagesDiv.innerHTML += `<li>${msg.msg} - [epoch: ${msg.epoch}, proof: ${msg.proofState} ]</li>` console.time("proof_verify_timer");
const res = msg.verifyNoRoot();
if (msg.proofState === "verifying...") { console.timeEnd("proof_verify_timer");
try { console.log("proof verified without roots", res);
console.log("Verifying proof without roots") if (res === undefined) {
console.time("proof_verify_timer") msg.proofState = "no proof attached";
const res = msg.verifyNoRoot() } else if (res) {
console.timeEnd("proof_verify_timer") msg.proofState = "verified.";
console.log("proof verified without roots", res) } else {
if (res === undefined) { msg.proofState = "invalid!";
msg.proofState = "no proof attached" }
} else if (res) { } catch (e) {
msg.proofState = "verified." msg.proofState = "Error encountered, check console";
} else { console.error("Error verifying proof:", e);
msg.proofState = "invalid!"
}
} catch (e) {
msg.proofState = "Error encountered, check console"
console.error("Error verifying proof:", e)
}
updateMessages()
console.log("Verifying proof with roots", msg.verify())
} }
}) updateMessages();
messagesDiv.innerHTML += "</ul>" console.log("Verifying proof with roots", msg.verify());
} }
});
messagesDiv.innerHTML += "</ul>";
};
const callback = (wakuMessage) => { const callback = (wakuMessage) => {
const {timestamp, nick, text} = ProtoChatMessage.decode(wakuMessage.payload) const { timestamp, nick, text } = ProtoChatMessage.decode(
wakuMessage.payload
);
const time = new Date(); const time = new Date();
time.setTime(Number(timestamp) * 1000); time.setTime(Number(timestamp) * 1000);
let proofState, verify, verifyNoRoot; let proofState, verify, verifyNoRoot;
if (typeof wakuMessage.rateLimitProof === "undefined") { if (typeof wakuMessage.rateLimitProof === "undefined") {
proofState = "no proof attached"; proofState = "no proof attached";
} else { } else {
console.log("Proof received:", wakuMessage.rateLimitProof) console.log("Proof received:", wakuMessage.rateLimitProof);
verify = wakuMessage.verify.bind(wakuMessage); verify = wakuMessage.verify.bind(wakuMessage);
verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage); verifyNoRoot = wakuMessage.verifyNoRoot.bind(wakuMessage);
proofState = "verifying..."; proofState = "verifying...";
} }
messages.push({ messages.push({
msg: `(${nick}) <strong>${utils.bytesToUtf8(text)}</strong> <i>[${time.toISOString()}]</i>`, msg: `(${nick}) <strong>${utils.bytesToUtf8(
epoch: wakuMessage.epoch, text
verify, )}</strong> <i>[${time.toISOString()}]</i>`,
verifyNoRoot, epoch: wakuMessage.epoch,
proofState verify,
verifyNoRoot,
proofState,
}); });
updateMessages() updateMessages();
} };
(async () => {
(async () => { statusDiv.innerHTML = "<p>Creating Waku node.</p>";
statusDiv.innerHTML = '<p>Creating Waku node.</p>';
node = await createLightNode(); node = await createLightNode();
statusDiv.innerHTML = '<p>Starting Waku node.</p>'; statusDiv.innerHTML = "<p>Starting Waku node.</p>";
await node.start(); await node.start();
statusDiv.innerHTML = '<p>Waku node started.</p>'; statusDiv.innerHTML = "<p>Waku node started.</p>";
updateFields() updateFields();
})() })();
dialButton.onclick = async () => { dialButton.onclick = async () => {
const ma = remoteMultiAddrInput.value const ma = remoteMultiAddrInput.value;
if (!ma) { if (!ma) {
statusDiv.innerHTML = '<p>Error: No multiaddr provided.</p>'; statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
return; return;
} }
statusDiv.innerHTML = '<p>Dialing peer.</p>'; statusDiv.innerHTML = "<p>Dialing peer.</p>";
await node.dial(ma, ["filter", "lightpush"]) await node.dial(ma, ["filter", "lightpush"]);
await waitForRemotePeer(node, ["filter", "lightpush"]); await waitForRemotePeer(node, ["filter", "lightpush"]);
statusDiv.innerHTML = '<p>Waku node connected.</p>'; statusDiv.innerHTML = "<p>Waku node connected.</p>";
await rlnInstancePromise; await rlnInstancePromise;
const decoder = new RLNDecoder(rlnInstance, new DecoderV0(ContentTopic)); const decoder = new RLNDecoder(
await node.filter.subscribe([decoder], callback) rlnInstance,
statusDiv.innerHTML = '<p>Waku node subscribed.</p>'; new DecoderV0(ContentTopic)
);
await node.filter.subscribe([decoder], callback);
statusDiv.innerHTML = "<p>Waku node subscribed.</p>";
nodeConnected = true; nodeConnected = true;
updateFields() updateFields();
} };
sendButton.onclick = async () => { sendButton.onclick = async () => {
const text = utils.utf8ToBytes(textInput.value); const text = utils.utf8ToBytes(textInput.value);
const timestamp = new Date(); const timestamp = new Date();
const msg = ProtoChatMessage.create({ const msg = ProtoChatMessage.create({
text, text,
nick: nicknameInput.value, nick: nicknameInput.value,
timestamp: Math.floor(timestamp.valueOf() / 1000) timestamp: Math.floor(timestamp.valueOf() / 1000),
}); });
const payload = ProtoChatMessage.encode(msg).finish(); const payload = ProtoChatMessage.encode(msg).finish();
console.log("Sending message with proof...") console.log("Sending message with proof...");
sendingStatusSpan.innerText = 'sending...' sendingStatusSpan.innerText = "sending...";
await node.lightPush.push(encoder, {payload, timestamp}); await node.lightPush.push(encoder, { payload, timestamp });
sendingStatusSpan.innerText = 'sent!' sendingStatusSpan.innerText = "sent!";
console.log("Message sent!") console.log("Message sent!");
textInput.value = null; textInput.value = null;
setTimeout(() => { setTimeout(() => {
sendingStatusSpan.innerText = '' sendingStatusSpan.innerText = "";
}, 5000) }, 5000);
}; };
</script> </script>
</body> </body>
</html> </html>

View File

@ -1,62 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset='UTF-8'/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>JS-Waku store script tag example</title> <title>JS-Waku store script tag example</title>
</head> </head>
<body> <body>
<div><h1>Timestamp of the latest message seen in store</h1></div>
<div id="timestamp"></div>
<div><h1>Timestamp of the latest message seen in store</h1></div> <script type="module">
<div id='timestamp'></div> import {
defaultLibp2p,
defaultPeerDiscovery,
} from "https://unpkg.com/@waku/create@0.0.4/bundle/index.js";
import { waitForRemotePeer } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js";
import {
wakuStore,
WakuNode,
} from "https://unpkg.com/@waku/core@0.0.6/bundle/index.js";
import { DecoderV0 } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
<script type='module'> /**
import {defaultLibp2p, defaultPeerDiscovery} from 'https://unpkg.com/@waku/create@0.0.4/bundle/index.js' * This example demonstrates how to use the js-waku minified bundle
import {waitForRemotePeer} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js' * available on unpkg.com.
import {wakuStore, WakuNode} from 'https://unpkg.com/@waku/core@0.0.6/bundle/index.js' *
import {DecoderV0} from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js' * It is a simple script that uses Waku Store to retrieve ping relay messages
* and displays the timestamp of the most recent ping relay message.
*/
const timestampDiv = document.getElementById("timestamp");
/** timestampDiv.innerHTML = "<p>Creating waku.</p>";
* This example demonstrates how to use the js-waku minified bundle
* available on unpkg.com.
*
* It is a simple script that uses Waku Store to retrieve ping relay messages
* and displays the timestamp of the most recent ping relay message.
*/
const timestampDiv = document.getElementById('timestamp');
timestampDiv.innerHTML = '<p>Creating waku.</p>'; const libp2p = await defaultLibp2p(undefined, {
peerDiscovery: [defaultPeerDiscovery()],
});
const store = wakuStore();
const node = new WakuNode({}, libp2p, store);
const libp2p = await defaultLibp2p( timestampDiv.innerHTML = "<p>Starting waku.</p>";
undefined, await node.start();
{peerDiscovery: [defaultPeerDiscovery()]},
);
const store = wakuStore();
const node = new WakuNode({}, libp2p, store,);
timestampDiv.innerHTML = '<p>Starting waku.</p>'; timestampDiv.innerHTML = "<p>Connecting to a peer.</p>";
await node.start(); await waitForRemotePeer(node, ["store"]);
timestampDiv.innerHTML = '<p>Connecting to a peer.</p>'; timestampDiv.innerHTML = "<p>Retrieving messages.</p>";
await waitForRemotePeer(node, ["store"]); const callback = (wakuMessage) => {
timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
const callback = (wakuMessage) => {
// When `backward` direction is passed, first message is the most recent // When `backward` direction is passed, first message is the most recent
timestampDiv.innerHTML = wakuMessage.timestamp; timestampDiv.innerHTML = wakuMessage.timestamp;
// When returning true, `queryHistory` stops retrieving pages // When returning true, `queryHistory` stops retrieving pages
// In our case, we only want one message, hence one page. // In our case, we only want one message, hence one page.
return true; return true;
}; };
await node.store
.queryOrderedCallback([new DecoderV0("/relay-ping/1/ping/null")],
callback,
{pageDirection: 'backward'});
</script>
</body>
await node.store.queryOrderedCallback(
[new DecoderV0("/relay-ping/1/ping/null")],
callback,
{ pageDirection: "backward" }
);
</script>
</body>
</html> </html>

View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }

View File

@ -4,11 +4,11 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link
<meta rel="stylesheet"
name="description" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
content="Chat app powered by js-waku"
/> />
<meta name="description" content="Chat app powered by js-waku" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

View File

@ -2,15 +2,15 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }
@ -25,6 +25,6 @@ code {
display: table; display: table;
} }
.chat-room{ .chat-room {
margin: 2px; margin: 2px;
} }