refactor: migrate dashboard to react

This commit is contained in:
Derrick Hammer 2023-07-27 18:20:20 -04:00
parent 03f170a050
commit a11abc7bda
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
10 changed files with 533 additions and 44 deletions

332
npm-shrinkwrap.json generated
View File

@ -16,7 +16,7 @@
"@lumeweb/kernel-network-registry-client": "^0.1.0-develop.5",
"@lumeweb/kernel-peer-discovery-client": "0.0.2-develop.10",
"@lumeweb/kernel-swarm-client": "0.1.0-develop.4",
"@lumeweb/libkernel": "0.1.0-develop.29",
"@lumeweb/libkernel": "0.1.0-develop.30",
"@lumeweb/libresolver": "^0.1.0-develop.1",
"@lumeweb/libweb": "0.2.0-develop.27",
"@lumeweb/tld-enum": "0.1.0-develop.1",
@ -24,6 +24,7 @@
"@peculiar/webcrypto": "^1.4.3",
"@scure/bip39": "^1.2.1",
"binconv": "^0.2.0",
"classnames": "^2.3.2",
"ed25519-keygen": "^0.4.1",
"ejs": "^3.1.9",
"emittery": "^1.0.1",
@ -32,6 +33,8 @@
"node-cache": "^5.1.2",
"object-diff": "^0.0.4",
"p-defer": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webextension-polyfill": "^0.10.0"
},
"devDependencies": {
@ -39,8 +42,12 @@
"@sveltejs/vite-plugin-svelte": "^2.4.2",
"@tsconfig/svelte": "^5.0.0",
"@types/object-diff": "^0.0.2",
"@types/react": "^18.2.17",
"@types/react-dom": "^18.2.7",
"@types/webextension-polyfill": "^0.10.1",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.14",
"html-react-parser": "^4.2.0",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.63.6",
@ -80,7 +87,6 @@
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
"peer": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9"
@ -109,7 +115,6 @@
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
"integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
@ -118,7 +123,6 @@
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz",
"integrity": "sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.22.5",
@ -147,14 +151,12 @@
"node_modules/@babel/core/node_modules/convert-source-map": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
"peer": true
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
},
"node_modules/@babel/core/node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"peer": true,
"bin": {
"semver": "bin/semver.js"
}
@ -163,7 +165,6 @@
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
"integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
"peer": true,
"dependencies": {
"@babel/types": "^7.22.5",
"@jridgewell/gen-mapping": "^0.3.2",
@ -178,7 +179,6 @@
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz",
"integrity": "sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==",
"peer": true,
"dependencies": {
"@babel/compat-data": "^7.22.9",
"@babel/helper-validator-option": "^7.22.5",
@ -197,7 +197,6 @@
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"peer": true,
"bin": {
"semver": "bin/semver.js"
}
@ -206,7 +205,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
"integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
@ -215,7 +213,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
"integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
"peer": true,
"dependencies": {
"@babel/template": "^7.22.5",
"@babel/types": "^7.22.5"
@ -228,7 +225,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
"integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
"peer": true,
"dependencies": {
"@babel/types": "^7.22.5"
},
@ -240,7 +236,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
"integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
"peer": true,
"dependencies": {
"@babel/types": "^7.22.5"
},
@ -252,7 +247,6 @@
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
"integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
"peer": true,
"dependencies": {
"@babel/helper-environment-visitor": "^7.22.5",
"@babel/helper-module-imports": "^7.22.5",
@ -271,7 +265,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
"integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
@ -280,7 +273,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
"integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
"peer": true,
"dependencies": {
"@babel/types": "^7.22.5"
},
@ -292,7 +284,6 @@
"version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
"integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
"peer": true,
"dependencies": {
"@babel/types": "^7.22.5"
},
@ -304,7 +295,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
"integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
@ -321,7 +311,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
"integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
@ -330,7 +319,6 @@
"version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.6.tgz",
"integrity": "sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==",
"peer": true,
"dependencies": {
"@babel/template": "^7.22.5",
"@babel/traverse": "^7.22.6",
@ -421,7 +409,6 @@
"version": "7.22.7",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
"integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
"peer": true,
"bin": {
"parser": "bin/babel-parser.js"
},
@ -606,11 +593,40 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-react-jsx-self": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.22.5.tgz",
"integrity": "sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==",
"dev": true,
"dependencies": {
"@babel/helper-plugin-utils": "^7.22.5"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-react-jsx-source": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.22.5.tgz",
"integrity": "sha512-yIiRO6yobeEIaI0RTbIr8iAK9FcBHLtZq0S89ZPjDLQXBA4xvghaKqI0etp/tF3htTM0sazJKKLz9oEiGRtu7w==",
"dev": true,
"dependencies": {
"@babel/helper-plugin-utils": "^7.22.5"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/template": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
"integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.22.5",
"@babel/parser": "^7.22.5",
@ -624,7 +640,6 @@
"version": "7.22.8",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.8.tgz",
"integrity": "sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.22.5",
"@babel/generator": "^7.22.7",
@ -645,7 +660,6 @@
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
"peer": true,
"engines": {
"node": ">=4"
}
@ -654,7 +668,6 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
"integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
"peer": true,
"dependencies": {
"@babel/helper-string-parser": "^7.22.5",
"@babel/helper-validator-identifier": "^7.22.5",
@ -2229,9 +2242,9 @@
}
},
"node_modules/@lumeweb/libkernel": {
"version": "0.1.0-develop.29",
"resolved": "https://registry.npmjs.org/@lumeweb/libkernel/-/libkernel-0.1.0-develop.29.tgz",
"integrity": "sha512-Ja+LjtUeU4tTI2hM79NEKQ7WEUBnq3Q4Lae+n39FjTnJptNp3edPrkhOpzau47soIBQl9YQ65AhLoxv9T0x7uA==",
"version": "0.1.0-develop.30",
"resolved": "https://registry.npmjs.org/@lumeweb/libkernel/-/libkernel-0.1.0-develop.30.tgz",
"integrity": "sha512-+YdBEfwcWRv9AJnVv1c/6/tMcJeH/chSRiiuQykcxj5YOEjFKNrL4cK5ZZnZR19R8bJQsqiJvJDrl5Qd7jhkWw==",
"dependencies": {
"@lumeweb/libweb": "0.2.0-develop.27",
"emittery": "^1.0.1",
@ -4050,12 +4063,44 @@
"integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
"peer": true
},
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
},
"node_modules/@types/pug": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
"integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
"dev": true
},
"node_modules/@types/react": {
"version": "18.2.17",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.17.tgz",
"integrity": "sha512-u+e7OlgPPh+aryjOm5UJMX32OvB2E3QASOAqVMY6Ahs90djagxwv2ya0IctglNbNTexC12qCSMZG47KPfy1hAA==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-dom": {
"version": "18.2.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
"integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
"dev": true
},
"node_modules/@types/semver": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz",
@ -4294,6 +4339,24 @@
"resolved": "https://registry.npmjs.org/@vascosantos/moving-average/-/moving-average-1.1.0.tgz",
"integrity": "sha512-MVEJ4vWAPNbrGLjz7ITnHYg+YXZ6ijAqtH5/cHwSoCpbvuJ98aLXwFfPKAUfZpJMQR5uXB58UJajbY130IRF/w=="
},
"node_modules/@vitejs/plugin-react": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.0.3.tgz",
"integrity": "sha512-pwXDog5nwwvSIzwrvYYmA2Ljcd/ZNlcsSG2Q9CNDBwnsd55UGAyr2doXtB5j+2uymRCnCfExlznzzSFbBRcoCg==",
"dev": true,
"dependencies": {
"@babel/core": "^7.22.5",
"@babel/plugin-transform-react-jsx-self": "^7.22.5",
"@babel/plugin-transform-react-jsx-source": "^7.22.5",
"react-refresh": "^0.14.0"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"peerDependencies": {
"vite": "^4.2.0"
}
},
"node_modules/abbrev": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@ -5648,6 +5711,11 @@
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
"peer": true
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/clean-stack": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@ -6746,6 +6814,12 @@
"node": ">=4"
}
},
"node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
"dev": true
},
"node_modules/custom-error-instance": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
@ -7053,6 +7127,20 @@
"node": ">=6.0.0"
}
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"dev": true,
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/domain-browser": {
"version": "4.22.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz",
@ -7065,6 +7153,47 @@
"url": "https://bevry.me/fund"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
]
},
"node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"dev": true,
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/domutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
"dev": true,
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/dot-prop": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@ -7347,6 +7476,18 @@
"iconv-lite": "^0.6.2"
}
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/env-ci": {
"version": "9.1.1",
"resolved": "https://registry.npmjs.org/env-ci/-/env-ci-9.1.1.tgz",
@ -8682,7 +8823,6 @@
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
@ -9386,12 +9526,56 @@
"node": ">=12"
}
},
"node_modules/html-dom-parser": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-4.0.0.tgz",
"integrity": "sha512-TUa3wIwi80f5NF8CVWzkopBVqVAtlawUzJoLwVLHns0XSJGynss4jiY0mTWpiDOsuyw+afP+ujjMgRh9CoZcXw==",
"dev": true,
"dependencies": {
"domhandler": "5.0.3",
"htmlparser2": "9.0.0"
}
},
"node_modules/html-escaper": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
"peer": true
},
"node_modules/html-react-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-4.2.0.tgz",
"integrity": "sha512-gzU55AS+FI6qD7XaKe5BLuLFM2Xw0/LodfMWZlxV9uOHe7LCD5Lukx/EgYuBI3c0kLu0XlgFXnSzO0qUUn3Vrg==",
"dev": true,
"dependencies": {
"domhandler": "5.0.3",
"html-dom-parser": "4.0.0",
"react-property": "2.0.0",
"style-to-js": "1.1.3"
},
"peerDependencies": {
"react": "0.14 || 15 || 16 || 17 || 18"
}
},
"node_modules/htmlparser2": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.0.0.tgz",
"integrity": "sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==",
"dev": true,
"funding": [
"https://github.com/fb55/htmlparser2?sponsor=1",
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3",
"domutils": "^3.1.0",
"entities": "^4.5.0"
}
},
"node_modules/http-cache-semantics": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@ -9717,6 +9901,12 @@
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
}
},
"node_modules/inline-style-parser": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
"dev": true
},
"node_modules/interface-blockstore": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/interface-blockstore/-/interface-blockstore-5.2.3.tgz",
@ -11382,7 +11572,6 @@
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
"peer": true,
"bin": {
"jsesc": "bin/jsesc"
},
@ -11438,7 +11627,6 @@
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"peer": true,
"bin": {
"json5": "lib/cli.js"
},
@ -12188,11 +12376,21 @@
"npm": ">=7.0.0"
}
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
"peer": true,
"dependencies": {
"yallist": "^3.0.2"
}
@ -18183,12 +18381,50 @@
"node": ">=0.10.0"
}
},
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"dependencies": {
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
"peer": true
},
"node_modules/react-property": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz",
"integrity": "sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==",
"dev": true
},
"node_modules/react-refresh": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -18977,6 +19213,14 @@
"node": ">=14.0.0"
}
},
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"dependencies": {
"loose-envify": "^1.1.0"
}
},
"node_modules/semantic-release": {
"version": "21.0.7",
"resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-21.0.7.tgz",
@ -20475,6 +20719,24 @@
"url": "https://github.com/sponsors/Borewit"
}
},
"node_modules/style-to-js": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.3.tgz",
"integrity": "sha512-zKI5gN/zb7LS/Vm0eUwjmjrXWw8IMtyA8aPBJZdYiQTXj4+wQ3IucOLIOnF7zCHxvW8UhIGh/uZh/t9zEHXNTQ==",
"dev": true,
"dependencies": {
"style-to-object": "0.4.1"
}
},
"node_modules/style-to-object": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz",
"integrity": "sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==",
"dev": true,
"dependencies": {
"inline-style-parser": "0.1.1"
}
},
"node_modules/sucrase": {
"version": "3.33.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.33.0.tgz",
@ -20937,7 +21199,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
"peer": true,
"engines": {
"node": ">=4"
}
@ -22816,8 +23077,7 @@
"node_modules/yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
"peer": true
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
},
"node_modules/yaml": {
"version": "2.3.1",

View File

@ -16,8 +16,12 @@
"@sveltejs/vite-plugin-svelte": "^2.4.2",
"@tsconfig/svelte": "^5.0.0",
"@types/object-diff": "^0.0.2",
"@types/react": "^18.2.17",
"@types/react-dom": "^18.2.7",
"@types/webextension-polyfill": "^0.10.1",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.14",
"html-react-parser": "^4.2.0",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.63.6",
@ -35,7 +39,7 @@
"@lumeweb/kernel-network-registry-client": "^0.1.0-develop.5",
"@lumeweb/kernel-peer-discovery-client": "0.0.2-develop.10",
"@lumeweb/kernel-swarm-client": "0.1.0-develop.4",
"@lumeweb/libkernel": "0.1.0-develop.29",
"@lumeweb/libkernel": "0.1.0-develop.30",
"@lumeweb/libresolver": "^0.1.0-develop.1",
"@lumeweb/libweb": "0.2.0-develop.27",
"@lumeweb/tld-enum": "0.1.0-develop.1",
@ -43,6 +47,7 @@
"@peculiar/webcrypto": "^1.4.3",
"@scure/bip39": "^1.2.1",
"binconv": "^0.2.0",
"classnames": "^2.3.2",
"ed25519-keygen": "^0.4.1",
"ejs": "^3.1.9",
"emittery": "^1.0.1",
@ -51,9 +56,11 @@
"node-cache": "^5.1.2",
"object-diff": "^0.0.4",
"p-defer": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webextension-polyfill": "^0.10.0"
},
"overrides": {
"@lumeweb/libkernel": "0.1.0-develop.29"
"@lumeweb/libkernel": "0.1.0-develop.30"
}
}

82
ui/apps/dashboard/App.jsx Normal file
View File

@ -0,0 +1,82 @@
import "./App.scss";
import { useEffect, useState } from "react";
import Header from "./components/Header.jsx";
import Art from "./components/Art.jsx";
import { waitForConnected } from "../../../shared/util.ts";
import { createClient } from "@lumeweb/kernel-network-registry-client";
import Network from "./components/Network.jsx";
import Footer from "./components/Footer.jsx";
import classNames from "classnames";
const networkClient = createClient();
async function getNetworks() {
let types = {};
await waitForConnected(async () => {
const allTypes = await networkClient.getTypes();
for (const type of allTypes) {
types[type] = await networkClient.getNetworksByType(type);
}
});
return types;
}
export default function App() {
let [connected, setConnected] = useState(false);
let [networks, setNetworks] = useState({});
let [showConnected, setShowConnected] = useState(false);
let [artPulse, setArtPulse] = useState(false);
useEffect(() => {
getNetworks().then((networks) => {
setConnected(true);
setNetworks(networks);
});
});
useEffect(() => {
if (connected) {
const pulseTimeout = setTimeout(() => {
setArtPulse(true);
setTimeout(() => {
setArtPulse(false);
setShowConnected(true);
}, 1000);
}, 1000);
return () => clearTimeout(pulseTimeout);
}
}, [connected]);
return (
<main>
<Header connected={connected} />
<Art connected={showConnected} pulse={artPulse} />
<div className={classNames("content", { connected: showConnected })}>
<h3>All set.</h3>
<div className="content-grid">
{showConnected &&
Object.entries(networks).map(([type, networks]) => {
if (!networks.length) {
return <></>;
}
return (
<div>
<h4>{type} Networks</h4>
<ul>
{networks.map((network) => (
<Network module={network} />
))}
</ul>
</div>
);
})}
</div>
</div>
<Footer connected={connected} />
</main>
);
}

View File

@ -0,0 +1,21 @@
import "./Art.scss";
import classNames from "classnames";
export default function Art({ connected, pulse }) {
return (
<div
className={classNames("art-wrapper", {
pulse,
connected,
})}>
<div className="art-rotate">
<div className="art">
<div className="gradient-1" />
<div className="gradient-2" />
<div className="gradient-3" />
<div className="gradient-4" />
</div>
</div>
</div>
);
}

View File

@ -0,0 +1,26 @@
import "./Footer.scss";
import classNames from "classnames";
import svgGithub from "../../../assets/icon/github.svg?raw";
import svgDiscord from "../../../assets/icon/discord.svg?raw";
import svgTwitter from "../../../assets/icon/twitter.svg?raw";
import svgFacebook from "../../../assets/icon/facebook.svg?raw";
import parse from "html-react-parser";
export default function Footer({ connected }) {
return (
<div className={classNames("socials", { connected })}>
<a href="#" title="GitHub" className="github-logo">
{parse(svgGithub)}
</a>
<a href="#" title="Discord" className="discord-logo">
{parse(svgDiscord)}
</a>
<a href="#" title="Twitter" className="twitter-logo">
{parse(svgTwitter)}
</a>
<a href="#" title="Facebook" className="facebook-logo">
{parse(svgFacebook)}
</a>
</div>
);
}

View File

@ -1,3 +1,4 @@
@import "../../../styles/mixins";
.socials {
position: absolute;
bottom: 5em;
@ -19,7 +20,7 @@
}
}
:global(svg) {
svg {
@include fluid-width-height(2rem, 2rem);
}

View File

@ -0,0 +1,50 @@
import "./Header.scss";
import lumeLogo from "../../../assets/lume-logo.png";
import { useState } from "react";
import classNames from "classnames";
export default function Header({ connected }) {
let [userCount, setUserCount] = useState(0);
return (
<header>
<img src={lumeLogo} alt="Lume" />
<div className="status">
<div
className={classNames("network", {
connected,
connecting: !connected,
})}>
<div className={classNames({ connected, connecting: !connected })}>
<span
className={classNames("icon", {
"icon-success": connected,
"icon-wait": !connected,
"icon-yellow": !connected,
})}
/>
Lume Network
</div>
</div>
<div
className={classNames("user-count", {
"user-count-hidden": !userCount,
})}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
/>
</svg>
{userCount}
</div>
</div>
</header>
);
}

View File

@ -0,0 +1,39 @@
import "./Network.scss";
import { useEffect, useState } from "react";
import classNames from "classnames";
import { getNetworkModuleStatus } from "@lumeweb/libkernel";
export default function Network({ module }) {
let [ready, setReady] = useState(false);
let [sync, setSync] = useState(null);
let [peers, setPeers] = useState(0);
useEffect(() => {
const destroy = getNetworkModuleStatus((data) => {
setReady(data.ready);
setSync(data.sync);
setPeers(data.peers);
}, module);
return () => destroy?.();
}, [module]);
return (
<li className={classNames({ success: ready, loading: !ready })}>
<div className="network">
<span
className={classNames("icon", {
"icon-success": ready,
"icon-wait": !ready,
})}
/>
Network
</div>
{ready ? (
<div className="status">Synced</div>
) : (
<div className="status">Syncing</div>
)}
</li>
);
}

View File

@ -1,7 +1,8 @@
import App from "./apps/dashboard/App.svelte";
import { createRoot } from "react-dom";
import React from "react";
const app = new App({
target: document.getElementById("app"),
});
import App from "./apps/dashboard/App.jsx";
export default app;
const root = createRoot(document.getElementById("app"));
root.render(React.createElement(App));

View File

@ -4,6 +4,7 @@ import { resolve } from "path";
import optimizer from "vite-plugin-optimizer";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import autoPreprocess from "svelte-preprocess";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
@ -24,6 +25,7 @@ export default defineConfig({
svelte({
preprocess: autoPreprocess(),
}),
react(),
optimizer({
"node-fetch":
"const e = undefined; export default e;export {e as Response, e as FormData, e as Blob};",