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 {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

View File

@ -1,5 +1,16 @@
{
"dependencies": {
"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"
}
}

View File

@ -2,70 +2,218 @@ lockfileVersion: 5.4
specifiers:
gh-pages: ^4.0.0
husky: ^8.0.0
prettier: ^2.8.1
pretty-quick: ^3.1.3
dependencies:
gh-pages: 4.0.0
devDependencies:
husky: 8.0.2
prettier: 2.8.1
pretty-quick: 3.1.3_prettier@2.8.1
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:
resolution: {integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==,
}
engines: { node: ">=0.10.0" }
dependencies:
array-uniq: 1.0.3
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:
resolution: {integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==,
}
engines: { node: ">=0.10.0" }
dev: false
/arrify/2.0.1:
resolution:
{
integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==,
}
engines: { node: ">=8" }
dev: true
/async/2.6.4:
resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
resolution:
{
integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==,
}
dependencies:
lodash: 4.17.21
dev: false
/balanced-match/1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
dev: false
resolution:
{
integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==,
}
/brace-expansion/1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
resolution:
{
integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==,
}
dependencies:
balanced-match: 1.0.2
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:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
resolution:
{
integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==,
}
dev: false
/commondir/1.0.1:
resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
resolution:
{
integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==,
}
dev: false
/concat-map/0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
dev: false
resolution:
{
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:
resolution: {integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==}
resolution:
{
integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==,
}
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:
resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
engines: {node: '>=0.8.0'}
resolution:
{
integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==,
}
engines: { node: ">=0.8.0" }
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:
resolution: {integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==}
engines: {node: '>=4'}
resolution:
{
integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==,
}
engines: { node: ">=4" }
dev: false
/filenamify/4.3.0:
resolution: {integrity: sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==}
engines: {node: '>=8'}
resolution:
{
integrity: sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==,
}
engines: { node: ">=8" }
dependencies:
filename-reserved-regex: 2.0.0
strip-outer: 1.0.1
@ -73,8 +221,11 @@ packages:
dev: false
/find-cache-dir/3.3.2:
resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
engines: {node: '>=8'}
resolution:
{
integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==,
}
engines: { node: ">=8" }
dependencies:
commondir: 1.0.1
make-dir: 3.1.0
@ -82,16 +233,21 @@ packages:
dev: false
/find-up/4.1.0:
resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
engines: {node: '>=8'}
resolution:
{
integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==,
}
engines: { node: ">=8" }
dependencies:
locate-path: 5.0.0
path-exists: 4.0.0
dev: false
/fs-extra/8.1.0:
resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
engines: {node: '>=6 <7 || >=8'}
resolution:
{
integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==,
}
engines: { node: ">=6 <7 || >=8" }
dependencies:
graceful-fs: 4.2.10
jsonfile: 4.0.0
@ -99,12 +255,28 @@ packages:
dev: false
/fs.realpath/1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
resolution:
{
integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==,
}
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:
resolution: {integrity: sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==}
engines: {node: '>=10'}
resolution:
{
integrity: sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==,
}
engines: { node: ">=10" }
hasBin: true
dependencies:
async: 2.6.4
@ -117,7 +289,10 @@ packages:
dev: false
/glob/7.2.3:
resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
resolution:
{
integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==,
}
dependencies:
fs.realpath: 1.0.0
inflight: 1.0.6
@ -128,8 +303,11 @@ packages:
dev: false
/globby/6.1.0:
resolution: {integrity: sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==,
}
engines: { node: ">=0.10.0" }
dependencies:
array-union: 1.0.2
glob: 7.2.3
@ -139,138 +317,407 @@ packages:
dev: false
/graceful-fs/4.2.10:
resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
resolution:
{
integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==,
}
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:
resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
resolution:
{
integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==,
}
dependencies:
once: 1.4.0
wrappy: 1.0.2
dev: false
/inherits/2.0.4:
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
resolution:
{
integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==,
}
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:
resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
resolution:
{
integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==,
}
optionalDependencies:
graceful-fs: 4.2.10
dev: false
/locate-path/5.0.0:
resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
engines: {node: '>=8'}
resolution:
{
integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==,
}
engines: { node: ">=8" }
dependencies:
p-locate: 4.1.0
dev: false
/lodash/4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
resolution:
{
integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==,
}
dev: false
/make-dir/3.1.0:
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
engines: {node: '>=8'}
resolution:
{
integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==,
}
engines: { node: ">=8" }
dependencies:
semver: 6.3.0
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:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
resolution:
{
integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==,
}
dependencies:
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:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==,
}
engines: { node: ">=0.10.0" }
dev: false
/once/1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
resolution:
{
integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==,
}
dependencies:
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:
resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
engines: {node: '>=6'}
resolution:
{
integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==,
}
engines: { node: ">=6" }
dependencies:
p-try: 2.2.0
dev: false
/p-locate/4.1.0:
resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
engines: {node: '>=8'}
resolution:
{
integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==,
}
engines: { node: ">=8" }
dependencies:
p-limit: 2.3.0
dev: false
/p-try/2.2.0:
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
engines: {node: '>=6'}
dev: false
resolution:
{
integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==,
}
engines: { node: ">=6" }
/path-exists/4.0.0:
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
engines: {node: '>=8'}
dev: false
resolution:
{
integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==,
}
engines: { node: ">=8" }
/path-is-absolute/1.0.1:
resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==,
}
engines: { node: ">=0.10.0" }
dev: false
/path-key/3.1.1:
resolution:
{
integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==,
}
engines: { node: ">=8" }
dev: true
/pify/2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==,
}
engines: { node: ">=0.10.0" }
dev: false
/pinkie-promise/2.0.1:
resolution: {integrity: sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==,
}
engines: { node: ">=0.10.0" }
dependencies:
pinkie: 2.0.4
dev: false
/pinkie/2.0.4:
resolution: {integrity: sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==,
}
engines: { node: ">=0.10.0" }
dev: false
/pkg-dir/4.2.0:
resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
engines: {node: '>=8'}
resolution:
{
integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==,
}
engines: { node: ">=8" }
dependencies:
find-up: 4.1.0
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:
resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
resolution:
{
integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==,
}
hasBin: true
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:
resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==,
}
engines: { node: ">=0.10.0" }
dependencies:
escape-string-regexp: 1.0.5
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:
resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
engines: {node: '>=0.10.0'}
resolution:
{
integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==,
}
engines: { node: ">=0.10.0" }
dependencies:
escape-string-regexp: 1.0.5
dev: false
/universalify/0.1.2:
resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
engines: {node: '>= 4.0.0'}
resolution:
{
integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==,
}
engines: { node: ">= 4.0.0" }
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:
resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
dev: false
resolution:
{
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>
<ul class="messages">
<li *ngFor="let message of messages">

View File

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

View File

@ -1,75 +1,85 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<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>
<div id='status'></div>
<label for="textInput">Message text</label>
<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>
<input disabled id='textInput' placeholder='Type your message here' type='text'>
<button disabled id='sendButton' type='button'>Send Message using Relay</button>
<div><h1>Messages</h1></div>
<div id="messages"></div>
<div><h1>Messages</h1></div>
<div id='messages'></div>
<script type="module">
/**
* 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'>
/**
* 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.
*/
const statusDiv = document.getElementById("status");
const messagesDiv = document.getElementById("messages");
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
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";
// Every Waku Message has a content topic that categorizes it.
// It is always encoded in clear text.
// 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";
const statusDiv = document.getElementById('status');
const messagesDiv = document.getElementById('messages');
const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton');
// Prepare encoder and decoder, `V0` for clear text messages.
// Every Waku Message has a content topic that categorizes it.
// It is always encoded in clear text.
// 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';
const encoder = new EncoderV0(contentTopic);
const decoder = new DecoderV0(contentTopic);
// Prepare encoder and decoder, `V0` for clear text messages.
const encoder = new EncoderV0(contentTopic);
const decoder = new DecoderV0(contentTopic);
try {
statusDiv.innerHTML = '<p>Starting</p>';
try {
statusDiv.innerHTML = "<p>Starting</p>";
// Create and starts a Waku node.
// `default: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes.
// We are currently working on migrating this method to DNS Discovery.
//
// 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();
// Add a hook to process all incoming messages on a specified content topic.
//
// 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.
// 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
if (!message.payload)
return;
if (!message.payload) return;
// Helper method to decode the payload to utf-8. A production dApp should
// use `wakuMessage.payload` (Uint8Array) which enables encoding a data
@ -77,10 +87,13 @@
//
// https://js.waku.org/functions/index.utils.bytesToUtf8.html
const text = bytesToUtf8(message.payload);
messagesDiv.innerHTML = `<p>${text}</p><br />` + messagesDiv.innerHTML;
}, [contentTopic]);
messagesDiv.innerHTML =
`<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
// 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
// protocol.
sendButton.onclick = async () => {
const payload = utf8ToBytes(textInput.value)
await waku.relay.send(encoder, {payload});
console.log('Message sent!');
const payload = utf8ToBytes(textInput.value);
await waku.relay.send(encoder, { payload });
console.log("Message sent!");
// Reset the text input.
textInput.value = null;
// Reset the text input.
textInput.value = null;
};
// Ready to send & receive messages, enable text input.
textInput.disabled = false;
sendButton.disabled = false;
statusDiv.innerHTML = '<p>Ready!</p>';
} catch (e) {
statusDiv.innerHTML = 'Failed to start application';
statusDiv.innerHTML = "<p>Ready!</p>";
} catch (e) {
statusDiv.innerHTML = "Failed to start application";
console.log(e);
}
</script>
</body>
}
</script>
</body>
</html>

View File

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

View File

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

View File

@ -1,62 +1,65 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<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>
<div id='timestamp'></div>
<script type="module">
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'
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'
/**
* 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");
/**
* 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>";
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(
undefined,
{peerDiscovery: [defaultPeerDiscovery()]},
);
const store = wakuStore();
const node = new WakuNode({}, libp2p, store,);
timestampDiv.innerHTML = "<p>Starting waku.</p>";
await node.start();
timestampDiv.innerHTML = '<p>Starting waku.</p>';
await node.start();
timestampDiv.innerHTML = "<p>Connecting to a peer.</p>";
await waitForRemotePeer(node, ["store"]);
timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
await waitForRemotePeer(node, ["store"]);
timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
const callback = (wakuMessage) => {
timestampDiv.innerHTML = "<p>Retrieving messages.</p>";
const callback = (wakuMessage) => {
// When `backward` direction is passed, first message is the most recent
timestampDiv.innerHTML = wakuMessage.timestamp;
// When returning true, `queryHistory` stops retrieving pages
// In our case, we only want one message, hence one page.
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>

View File

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

View File

@ -4,11 +4,11 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<meta
name="description"
content="Chat app powered by js-waku"
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<meta name="description" content="Chat app powered by js-waku" />
<!--
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/

View File

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