From 335fbb42c96aa48ffb02463746b409e531e41dc0 Mon Sep 17 00:00:00 2001 From: AnisHADJARAB Date: Tue, 6 Aug 2024 14:41:18 +0000 Subject: [PATCH 01/33] link with sdk client and start pairing process --- package-lock.json | 232 ++++++++++++++++++++-- package.json | 8 +- public/style/4nk.css | 54 ++++- src/html/home.html | 9 +- src/html/home.js | 25 ++- src/html/process.html | 2 +- src/html/process.js | 37 ---- src/index.html | 3 +- src/index.ts | 17 +- src/models/notification.model.ts | 22 +++ src/models/process.model.ts | 23 +++ src/services.ts | 183 ----------------- src/{ => services}/database.ts | 5 + src/services/routing.service.ts | 0 src/services/service.ts | 329 +++++++++++++++++++++++++++++++ src/websockets.ts | 71 +++---- vite.config.ts | 4 + 17 files changed, 727 insertions(+), 297 deletions(-) create mode 100644 src/models/notification.model.ts create mode 100644 src/models/process.model.ts delete mode 100644 src/services.ts rename src/{ => services}/database.ts (97%) create mode 100644 src/services/routing.service.ts create mode 100644 src/services/service.ts diff --git a/package-lock.json b/package-lock.json index 0e57a6a..89fbad1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,10 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "@types/qrcode": "^1.5.5", "@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-vue": "^5.0.5", + "qrcode": "^1.5.3", "vite": "^5.3.3", "vite-plugin-copy": "^0.1.6", "vite-plugin-html": "^3.2.2", @@ -1276,7 +1278,6 @@ "version": "20.14.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz", "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==", - "devOptional": true, "dependencies": { "undici-types": "~5.26.4" } @@ -1290,6 +1291,14 @@ "@types/node": "*" } }, + "node_modules/@types/qrcode": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz", + "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/qs": { "version": "6.9.15", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz", @@ -1794,7 +1803,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, "engines": { "node": ">=8" } @@ -2028,6 +2036,14 @@ "tslib": "^2.0.3" } }, + "node_modules/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "engines": { + "node": ">=6" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001640", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz", @@ -2116,6 +2132,77 @@ "node": ">= 10.0" } }, + "node_modules/cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } + }, + "node_modules/cliui/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/cliui/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/cliui/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/cliui/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "node_modules/cliui/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cliui/node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/clone-deep": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", @@ -2358,6 +2445,14 @@ } } }, + "node_modules/decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/default-browser": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz", @@ -2452,6 +2547,11 @@ "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "dev": true }, + "node_modules/dijkstrajs": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz", + "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==" + }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -2589,6 +2689,11 @@ "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "dev": true }, + "node_modules/encode-utf8": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz", + "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==" + }, "node_modules/encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -3011,7 +3116,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" @@ -3138,6 +3242,14 @@ "node": ">=6.9.0" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/get-intrinsic": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", @@ -3680,7 +3792,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true, "engines": { "node": ">=8" } @@ -4025,7 +4136,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, "dependencies": { "p-locate": "^4.1.0" }, @@ -4391,7 +4501,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, "dependencies": { "p-try": "^2.0.0" }, @@ -4406,7 +4515,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, "dependencies": { "p-limit": "^2.2.0" }, @@ -4435,7 +4543,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true, "engines": { "node": ">=6" } @@ -4477,7 +4584,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true, "engines": { "node": ">=8" } @@ -4573,6 +4679,14 @@ "node": ">=8" } }, + "node_modules/pngjs": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", + "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/postcss": { "version": "8.4.39", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", @@ -4647,6 +4761,23 @@ "node": ">=6" } }, + "node_modules/qrcode": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz", + "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==", + "dependencies": { + "dijkstrajs": "^1.0.1", + "encode-utf8": "^1.0.3", + "pngjs": "^5.0.0", + "yargs": "^15.3.1" + }, + "bin": { + "qrcode": "bin/qrcode" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", @@ -4790,6 +4921,14 @@ "strip-ansi": "^6.0.1" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -4799,6 +4938,11 @@ "node": ">=0.10.0" } }, + "node_modules/require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" + }, "node_modules/requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -5166,6 +5310,11 @@ "node": ">= 0.8.0" } }, + "node_modules/set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -5420,7 +5569,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -5794,8 +5942,7 @@ "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", - "devOptional": true + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" }, "node_modules/unicorn-magic": { "version": "0.1.0", @@ -6381,6 +6528,11 @@ "node": ">= 8" } }, + "node_modules/which-module": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", + "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==" + }, "node_modules/wildcard": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz", @@ -6535,10 +6687,66 @@ } } }, + "node_modules/y18n": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" + }, + "node_modules/yargs": { + "version": "15.4.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", + "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", + "dependencies": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "dependencies": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/yargs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "node_modules/yargs/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } } } } diff --git a/package.json b/package.json index dbf2d0c..3575293 100644 --- a/package.json +++ b/package.json @@ -2,12 +2,12 @@ "name": "sdk_client", "version": "1.0.0", "description": "", - "main": "index.js", + "main": "dist/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build_wasm": "wasm-pack build --out-dir ../../dist/pkg ./crates/sp_client --target bundler --dev", + "build_wasm": "wasm-pack build --out-dir ../ihm_client/dist/pkg ../sdk_client --target bundler --dev", "start": "vite --host 0.0.0.0", - "build": "webpack", + "build": "tsc && vite build", "deploy": "sudo cp -r dist/* /var/www/html/" }, "keywords": [], @@ -24,8 +24,10 @@ "webpack-dev-server": "^5.0.2" }, "dependencies": { + "@types/qrcode": "^1.5.5", "@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-vue": "^5.0.5", + "qrcode": "^1.5.3", "vite": "^5.3.3", "vite-plugin-copy": "^0.1.6", "vite-plugin-html": "^3.2.2", diff --git a/public/style/4nk.css b/public/style/4nk.css index 603d96e..d481fe2 100644 --- a/public/style/4nk.css +++ b/public/style/4nk.css @@ -36,9 +36,9 @@ body { .modal-content { width: 40%; - height: 40%; + height: 30%; background-color: white; - border-radius: 8px; + border-radius: 4px; padding: 20px; text-align: center; display: flex; @@ -48,21 +48,19 @@ body { .modal-title { margin: 0; - padding-bottom: 20px; + padding-bottom: 8px; width: 100%; - font-size: 1.5em; + font-size: 0.9em; border-bottom: 1px solid #ccc; } .confirmation-box { margin-top: 20px; align-content: center; - width: 40%; + width: 70%; height: 20%; padding: 20px; - background-color: var(--secondary-color); - border-radius: 8px; - font-size: 1.2em; + font-size: 1.6em; color: #333333; top: 20%; position: relative; @@ -106,6 +104,32 @@ body { font-weight: bold; } } + .notification-board { + position: absolute; + width: 20rem; + min-height: 8rem; + background-color: white; + right: 0.5rem; + display: none; + border-radius: 4px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: none; + + .notification-element { + padding: .8rem 0; + width: 100%; + &:hover { + background-color: rgba(26, 28, 24, .08); + } + } + .notification-element:not(:last-child) { + border-bottom: 1px solid; + } + } } .brand-logo { @@ -235,6 +259,12 @@ body { align-items: center; height: 200px; } + .camera-card { + display: flex; + justify-content: center; + align-items: center; + height: 200px; + } .btn { display: inline-block; @@ -282,7 +312,13 @@ body { padding: 1rem 0; } .process-element { - padding: .3rem 0; + padding: .4rem 0; + &:hover { + background-color: rgba(26, 28, 24, .08); + } + &.selected { + background-color: rgba(26, 28, 24, .08); + } } } diff --git a/src/html/home.html b/src/html/home.html index af2f19d..09bab2d 100644 --- a/src/html/home.html +++ b/src/html/home.html @@ -4,11 +4,14 @@
-
+
-
1
+
+
+
No notifications available
+
@@ -52,7 +55,7 @@
Scan your other device :
-
+
QR Code
diff --git a/src/html/home.js b/src/html/home.js index 2a54d5d..97c0a42 100644 --- a/src/html/home.js +++ b/src/html/home.js @@ -1,3 +1,5 @@ +import Services from "/src/services/service.ts"; + document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); @@ -7,7 +9,11 @@ document.querySelectorAll('.tab').forEach(tab => { document.getElementById(tab.getAttribute('data-tab')).classList.add('active'); }); }); - function toggleMenu() { + + document.getElementById('notification-bell').addEventListener('click', openCloseNotifications); + + + export function toggleMenu() { var menu = document.getElementById('menu'); if (menu.style.display === 'block') { menu.style.display = 'none'; @@ -16,11 +22,13 @@ document.querySelectorAll('.tab').forEach(tab => { } } + //// Modal - function openModal() { + export function openModal() { document.getElementById('modal').style.display = 'flex'; } + function closeModal() { document.getElementById('modal').style.display = 'none'; } @@ -31,4 +39,15 @@ document.querySelectorAll('.tab').forEach(tab => { if (event.target === modal) { closeModal(); } - } \ No newline at end of file + } + + function openCloseNotifications() { + const notifications = document.querySelector('.notification-board') + notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none' + } + +const service = await Services.getInstance() +service.setNotification() + +window.toggleMenu = toggleMenu; +window.openModal = openModal; \ No newline at end of file diff --git a/src/html/process.html b/src/html/process.html index e17fd46..fdf57f8 100644 --- a/src/html/process.html +++ b/src/html/process.html @@ -34,7 +34,7 @@
-
diff --git a/src/html/process.js b/src/html/process.js index afa3f23..e2bdcee 100644 --- a/src/html/process.js +++ b/src/html/process.js @@ -7,43 +7,6 @@ function toggleMenu() { } } -// Input for filtering script -// var processeList = [ -// { -// id: 1, -// name: "Messaging", -// description: "Encrypted messages", -// zoneList: [ -// { -// id: 1, -// name: "General", -// }, -// ], -// }, -// { -// id: 2, -// name: "Storage", -// description: "Distributed storage", -// zoneList: [ -// { -// id: 1, -// name: "Paris", -// }, -// { -// id: 2, -// name: "Normandy", -// }, -// { -// id: 3, -// name: "New York", -// }, -// { -// id: 4, -// name: "Moscow", -// }, -// ], -// }, -// ]; // Initialize function, create initial tokens with itens that are already selected by the user function init(element) { diff --git a/src/index.html b/src/index.html index b0e87e6..cc7b87b 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,7 @@ - + 4NK Application @@ -14,5 +14,6 @@
+ \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index b109c4b..1ccdb1e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,10 +1,21 @@ -import Services from './services'; -import { WebSocketClient } from './websockets'; +import Services from './services/service'; +// import { WebSocketClient } from './websockets'; -const wsurl = `wss://${window.location.hostname}/ws/`; +const wsurl = `wss://${window.location.hostname}:3001/ws/`; document.addEventListener('DOMContentLoaded', async () => { try { + const services = await Services.getInstance(); + let user = await services.getWallet() + console.log("πŸš€ ~ document.addEventListener ~ user:", user); + + if(!user) { + const sp_adress = await services.createNewDevice(); + user = await services.getWallet() + + console.log("πŸš€ ~ document.addEventListener ~ sp_adress:", sp_adress) + } + await services.getAdresses() await services.addWebsocketConnection(wsurl); await services.recoverInjectHtml() } catch (error) { diff --git a/src/models/notification.model.ts b/src/models/notification.model.ts new file mode 100644 index 0000000..2648e48 --- /dev/null +++ b/src/models/notification.model.ts @@ -0,0 +1,22 @@ +export interface INotification { + id: number; + title: string; + description: string; + sendToNotificationPage?: boolean; + path?: string; + +} + + +// Quelles sont les donnΓ©es utiles pour le user ??? +export interface IUser { + id: string; + information?: any +} + + +// Quelles sont les donnΓ©es utiles pour les messages ??? +export interface IMessage { + id: string; + message: any +} \ No newline at end of file diff --git a/src/models/process.model.ts b/src/models/process.model.ts new file mode 100644 index 0000000..c6f147e --- /dev/null +++ b/src/models/process.model.ts @@ -0,0 +1,23 @@ +export interface IProcess { + id: number; + name: string; + description: string; + icon?: string; + zoneList: IZone[], +} + +export interface IZone { + id: number; + name: string; + path: string; + // Est-ce que la zone a besoin d'une icone ? + icon?: string; + } + + export interface INotification { + id: number; + title: string; + description: string; + sendToNotificationPage?: boolean; + path?: string; +} \ No newline at end of file diff --git a/src/services.ts b/src/services.ts deleted file mode 100644 index 86e1df9..0000000 --- a/src/services.ts +++ /dev/null @@ -1,183 +0,0 @@ -import { WebSocketClient } from './websockets'; -import homePage from './html/home.html?raw'; -import homeScript from './html/home.js?raw'; -import processPage from './html/process.html?raw'; -import processScript from './html/process.js?raw'; - -export default class Services { - private static instance: Services; - private current_process: string | null = null; - private websocketConnection: WebSocketClient[] = []; - private sp_address: string | null = null; - private processes = [ - { - id: 1, - name: "Messaging", - description: "Encrypted messages", - zoneList: [ - { - id: 1, - name: "General", - }, - ], - }, - { - id: 2, - name: "Storage", - description: "Distributed storage", - zoneList: [ - { - id: 1, - name: "Paris", - }, - { - id: 2, - name: "Normandy", - }, - { - id: 3, - name: "New York", - }, - { - id: 4, - name: "Moscow", - }, - ], - }, - ]; - private subscriptions: {element: Element; event: string; eventHandler: string;}[] = [] ; - // Private constructor to prevent direct instantiation from outside - private constructor() {} - - // Method to access the singleton instance of Services - public static async getInstance(): Promise { - if (!Services.instance) { - Services.instance = new Services(); - // await Services.instance.init(); - } - return Services.instance; - } - - - public async addWebsocketConnection(url: string): Promise { - const services = await Services.getInstance(); - const newClient = new WebSocketClient(url, services); - if (!services.websocketConnection.includes(newClient)) { - services.websocketConnection.push(newClient); - } - } - public async recoverInjectHtml(): Promise { - const container = document.getElementById('containerId'); - - if (!container) { - console.error("No html container"); - return; - } - - const services = await Services.getInstance(); - container.innerHTML = homePage; - - const newScript = document.createElement('script') - newScript.textContent = homeScript; - document.head.appendChild(newScript).parentNode?.removeChild(newScript); - - const btn = container.querySelector('#scan-this-device') - if(btn) { - this.addSubscription(btn, 'click', 'injectProcessListPage') - } - } - private addSubscription(element: Element, event: string, eventHandler: string): void { - this.subscriptions.push({ element, event, eventHandler }); - element.addEventListener(event, (this as any)[eventHandler].bind(this)); - } - - private cleanSubsciptions(): void { - for (const sub of this.subscriptions) { - const el = sub.element; - const eventHandler = sub.eventHandler; - el.removeEventListener(sub.event, (this as any)[eventHandler].bind(this)); - } - this.subscriptions = []; - } - - async injectProcessListPage(): Promise { - const container = document.getElementById('containerId'); - if (!container) { - console.error("No html container"); - return; - } - - this.cleanSubsciptions() - - const services = await Services.getInstance(); - - container.innerHTML = processPage; - const newScript = document.createElement('script'); - newScript.textContent = processScript; - document.head.appendChild(newScript).parentNode?.removeChild(newScript); - - if(this.processes) { - services.setProcessesInSelectElement(this.processes) - } - } - - public async setProcessesInSelectElement(processList: any[]) { - const select = document.querySelector(".select-field"); - if(select) { - for (const process of processList) { - const option = document.createElement("option"); - option.setAttribute("value", process.name); - option.innerText = process.name; - select.appendChild(option); - } - } - const optionList = document.querySelector('.autocomplete-list'); - if(optionList) { - const observer = new MutationObserver((mutations, observer) => { - console.log(mutations, observer); - const options = optionList.querySelectorAll('li') - if(options) { - for(const option of options) { - this.addSubscription(option, 'click', 'showSelectedProcess') - } - } - }); - observer.observe(document, { - subtree: true, - attributes: true, - }); - } - } - - public async listenToOptionListPopulating(event: Event) { - const target = event.target as HTMLUListElement; - const options = target?.querySelectorAll('li') - console.log(options) - } - - public async showSelectedProcess(event: MouseEvent) { - const elem = event.target; - if(elem) { - - const cardContent = document.querySelector(".card-content"); - const processes = this.processes; - const process = processes.find((process: any) => process.name === (elem as any).dataset.value); - if (process) { - const processDiv = document.createElement("div"); - processDiv.className = "process"; - processDiv.id = process.name; - const titleDiv = document.createElement("div"); - titleDiv.className = "process-title"; - titleDiv.innerHTML = `${process.name} : ${process.description}`; - processDiv.appendChild(titleDiv); - for (const zone of process.zoneList) { - const zoneElement = document.createElement("div"); - zoneElement.className = "process-element"; - zoneElement.innerHTML = `Zone ${zone.id} : ${zone.name}`; - processDiv.appendChild(zoneElement); - } - if(cardContent) cardContent.appendChild(processDiv); - } - } - } -} \ No newline at end of file diff --git a/src/database.ts b/src/services/database.ts similarity index 97% rename from src/database.ts rename to src/services/database.ts index 81bb802..f14ba88 100644 --- a/src/database.ts +++ b/src/services/database.ts @@ -9,6 +9,11 @@ class Database { options: {'keyPath': 'pre_id'}, indices: [] }, + AnkSpAddress: { + name: "address", + options: {'keyPath': 'sp_address'}, + indices: [] + }, AnkSession: { name: "session", options: {}, diff --git a/src/services/routing.service.ts b/src/services/routing.service.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/services/service.ts b/src/services/service.ts new file mode 100644 index 0000000..d947e9d --- /dev/null +++ b/src/services/service.ts @@ -0,0 +1,329 @@ +// import { WebSocketClient } from '../websockets'; +import { INotification } from '~/models/notification.model'; +import homePage from '../html/home.html?raw'; +import homeScript from '../html/home.js?raw'; +import processPage from '../html/process.html?raw'; +import processScript from '../html/process.js?raw'; +import { IProcess } from '~/models/process.model'; +import Database from './database'; +import { WebSocketClient } from '../websockets'; +import QRCode from 'qrcode' + +export default class Services { + private static instance: Services; + private current_process: string | null = null; + private sdkClient: any; + // private websocketConnection: WebSocketClient[] = []; + private sp_address: string | null = null; + private processes: IProcess[] | null = null; + private notifications: INotification[] | null = null; + private subscriptions: {element: Element; event: string; eventHandler: string;}[] = [] ; + private database: any + // Private constructor to prevent direct instantiation from outside + private constructor() {} + + // Method to access the singleton instance of Services + public static async getInstance(): Promise { + if (!Services.instance) { + Services.instance = new Services(); + await Services.instance.init(); + } + return Services.instance; + } + + public async init(): Promise { + this.notifications = this.getNotifications(); + this.sdkClient = await import("../../dist/pkg/sdk_client"); + this.database = Database.getInstance() + } + + + public async addWebsocketConnection(url: string): Promise { + const services = await Services.getInstance(); + const newClient = new WebSocketClient(url, services); + // if (!services.websocketConnection.includes(newClient)) { + // services.websocketConnection.push(newClient); + // } + } + public async recoverInjectHtml(): Promise { + const container = document.getElementById('containerId'); + + if (!container) { + console.error("No html container"); + return; + } + + const services = await Services.getInstance(); + container.innerHTML = homePage; + + const newScript = document.createElement('script') + newScript.setAttribute('type', 'module') + newScript.textContent = homeScript; + document.head.appendChild(newScript).parentNode?.removeChild(newScript); + + const btn = container.querySelector('#scan-this-device') + if(btn) { + this.addSubscription(btn, 'click', 'injectProcessListPage') + } + + this.generateQRCode(this.sp_address || '') + } + + private generateQRCode = async (text: string) => { + try { + const container = document.getElementById('containerId'); + const url = await QRCode.toDataURL(text); + const qrCode = container?.querySelector('.qr-code img'); + qrCode?.setAttribute('src', url) + console.log(url); + } catch (err) { + console.error(err); + } + } + + private addSubscription(element: Element, event: string, eventHandler: string): void { + this.subscriptions.push({ element, event, eventHandler }); + element.addEventListener(event, (this as any)[eventHandler].bind(this)); + } + + async getWallet(): Promise { + const database = await Database.getInstance(); + const indexedDb = await database.getDb(); + const wallet = await database.getAll(indexedDb, database.getStoreList().AnkSpAddress) + console.log("πŸš€ ~ Services ~ getWallet ~ wallet:", wallet) + if(wallet.length) return wallet; + return undefined; + } + + async createNewDevice() { + const service = await Services.getInstance(); + const device = await service.sdkClient.create_new_device(1994, 'regtest') + const adresses = await service.sdkClient.get_address() + console.log("πŸš€ ~ Services ~ createNewDevice ~ adresses:", adresses) + if(device) { + console.log("πŸš€ ~ Services ~ createNewDevice ~ device:", {sp_adress: device}) + const database = await Database.getInstance(); + const indexedDb = await database.getDb(); + await database.writeObject(indexedDb, database.getStoreList().AnkSpAddress, {sp_address: device}, null); + } + this.sp_address = device; + console.log("πŸš€ ~ Services ~ createNewDevice ~ device:", device) + return device; + } + + async getAdresses() { + const service = await Services.getInstance(); + const adresses:string = await service.sdkClient.get_address() + console.log("πŸš€ ~ Services ~ createNewDevice ~ adresses:", adresses) + this.sp_address = adresses + } + + private cleanSubsciptions(): void { + for (const sub of this.subscriptions) { + const el = sub.element; + const eventHandler = sub.eventHandler; + el.removeEventListener(sub.event, (this as any)[eventHandler].bind(this)); + } + this.subscriptions = []; + } + + async injectProcessListPage(): Promise { + const container = document.getElementById('containerId'); + + if (!container) { + console.error("No html container"); + return; + } + + this.cleanSubsciptions() + + const services = await Services.getInstance(); + // const user = services.sdkClient.create_user('Test', 'test', 10, 1, 'Messaging') + // console.log("πŸš€ ~ Services ~ injectProcessListPage ~ user:", user) + + // const database = await Database.getInstance(); + // const indexedDb = await database.getDb(); + // await database.writeObject(indexedDb, database.getStoreList().AnkUser, user.user, null); + container.innerHTML = processPage; + const newScript = document.createElement('script'); + newScript.textContent = processScript; + document.head.appendChild(newScript).parentNode?.removeChild(newScript); + + this.processes = await services.getProcesses(); + if(this.processes) { + services.setProcessesInSelectElement(this.processes) + } + } + + public async setProcessesInSelectElement(processList: any[]) { + const select = document.querySelector(".select-field"); + if(select) { + for (const process of processList) { + const option = document.createElement("option"); + option.setAttribute("value", process.name); + option.innerText = process.name; + select.appendChild(option); + } + } + const optionList = document.querySelector('.autocomplete-list'); + if(optionList) { + const observer = new MutationObserver((mutations, observer) => { + const options = optionList.querySelectorAll('li') + if(options) { + for(const option of options) { + this.addSubscription(option, 'click', 'showSelectedProcess') + } + } + }); + observer.observe(document, { + subtree: true, + attributes: true, + }); + } + } + + public async listenToOptionListPopulating(event: Event) { + const target = event.target as HTMLUListElement; + const options = target?.querySelectorAll('li') + } + + public async showSelectedProcess(event: MouseEvent) { + const elem = event.target; + if(elem) { + + const cardContent = document.querySelector(".card-content"); + const services = await Services.getInstance(); + + const processes = await services.getProcesses(); + console.log("πŸš€ ~ Services ~ showSelectedProcess ~ processes:", processes) + const process = processes.find((process: any) => process.name === (elem as any).dataset.value); + if (process) { + const processDiv = document.createElement("div"); + processDiv.className = "process"; + processDiv.id = process.name; + const titleDiv = document.createElement("div"); + titleDiv.className = "process-title"; + titleDiv.innerHTML = `${process.name} : ${process.description}`; + processDiv.appendChild(titleDiv); + for (const zone of process.zoneList) { + const zoneElement = document.createElement("div"); + zoneElement.className = "process-element"; + zoneElement.setAttribute('zone-id', zone.id.toString()) + zoneElement.innerHTML = `Zone ${zone.id} : ${zone.name}`; + this.addSubscription(zoneElement, 'click', 'goToProcessPage') + processDiv.appendChild(zoneElement); + } + if(cardContent) cardContent.appendChild(processDiv); + } + } + } + + goToProcessPage(event: MouseEvent) { + const target = event.target as HTMLDivElement; + const zoneId = target?.getAttribute('zone-id'); + const processList = document.querySelectorAll('.process-element'); + if(processList) { + for(const process of processList) { + process.classList.remove('selected') + } + } + target.classList.add('selected') + + console.log('=======================> going to process page', zoneId) + } + + async getProcesses(): Promise { + return [ + { + id: 1, + name: "Messaging", + description: "Encrypted messages", + zoneList: [ + { + id: 1, + name: "General", + path: '/test' + }, + ], + }, + { + id: 2, + name: "Storage", + description: "Distributed storage", + zoneList: [ + { + id: 1, + name: "Paris", + path: '/test' + }, + { + id: 2, + name: "Normandy", + path: '/test' + }, + { + id: 3, + name: "New York", + path: '/test' + }, + { + id: 4, + name: "Moscow", + path: '/test' + }, + ], + }, + ]; + } + + getNotifications(): INotification[] { + return [ + { + id: 1, + title: 'Notif 1', + description: 'A normal notification', + sendToNotificationPage: false, + path: '/notif1' + }, + { + id: 2, + title: 'Notif 2', + description: 'A normal notification', + sendToNotificationPage: false, + path: '/notif2' + }, + { + id: 3, + title: 'Notif 3', + description: 'A normal notification', + sendToNotificationPage: false, + path: '/notif3' + } + ] + } + + async setNotification(): Promise { + const badge = document.querySelector('.notification-badge') as HTMLDivElement + const notifications = this.notifications + const noNotifications = document.querySelector('.no-notification') as HTMLDivElement + if(notifications?.length) { + badge.innerText = notifications.length.toString() + const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement + noNotifications.style.display = 'none' + for(const notif of notifications) { + const notifElement = document.createElement("div"); + notifElement.className = "notification-element"; + notifElement.setAttribute('notif-id', notif.id.toString()) + notifElement.innerHTML = ` +
${notif.title}
+
${notif.description}
+ `; + // this.addSubscription(notifElement, 'click', 'goToProcessPage') + notificationBoard.appendChild(notifElement); + } + } else { + noNotifications.style.display = 'block' + + } + } +} \ No newline at end of file diff --git a/src/websockets.ts b/src/websockets.ts index 6cc35c5..9389eee 100644 --- a/src/websockets.ts +++ b/src/websockets.ts @@ -1,5 +1,6 @@ -import Services from "./services"; -import { AnkFlag, AnkNetworkMsg, CachedMessage } from "../dist/pkg/sdk_client"; +import { AnkFlag, AnkNetworkMsg, CachedMessage } from "dist/pkg/sdk_client"; +import Services from "./services/service"; +// import { AnkFlag, AnkNetworkMsg, CachedMessage } from "../dist/pkg/sdk_client"; class WebSocketClient { private ws: WebSocket; @@ -24,51 +25,37 @@ class WebSocketClient { const msgData = event.data; (async () => { + console.log(msgData); if (typeof(msgData) === 'string') { console.log("Received text message: "+msgData); try { const feeRate = 1; // By parsing the message, we can link it with existing cached message and return the updated version of the message - let res: CachedMessage = await services.parseNetworkMessage(msgData, feeRate); - console.debug(res); - if (res.status === 'FaucetComplete') { - // we received a faucet tx, there's nothing else to do - window.alert(`New faucet output\n${res.commited_in}`); - await services.updateMessages(res); - await services.updateOwnedOutputsForUser(); - } else if (res.status === 'TxWaitingCipher') { - // we received a tx but we don't have the cipher - console.debug(`received notification in output ${res.commited_in}, waiting for cipher message`); - await services.updateMessages(res); - await services.updateOwnedOutputsForUser(); - } else if (res.status === 'CipherWaitingTx') { - // we received a cipher but we don't have the key - console.debug(`received a cipher`); - await services.updateMessages(res); - } else if (res.status === 'SentWaitingConfirmation') { - // We are sender and we're waiting for the challenge that will confirm recipient got the transaction and the message - await services.updateMessages(res); - await services.updateOwnedOutputsForUser(); - } else if (res.status === 'MustSpendConfirmation') { - // we received a challenge for a notification we made - // that means we can stop rebroadcasting the tx and we must spend the challenge to confirm - window.alert(`Spending ${res.confirmed_by} to prove our identity`); - console.debug(`sending confirm message to ${res.recipient}`); - await services.updateMessages(res); - await services.answer_confirmation_message(res); - } else if (res.status === 'ReceivedMustConfirm') { - // we found a notification and decrypted the cipher - window.alert(`Received message from ${res.sender}\n${res.plaintext}`); - // we must spend the commited_in output to sender - await services.updateMessages(res); - await services.confirm_sender_address(res); - } else if (res.status === 'Complete') { - window.alert(`Received confirmation that ${res.sender} is the author of message ${res.plaintext}`) - await services.updateMessages(res); - await services.updateOwnedOutputsForUser(); - } else { - console.debug('Received an unimplemented valid message'); - } + // if (res.status === 'FaucetComplete') { + // // we received a faucet tx, there's nothing else to do + // window.alert(`New faucet output\n${res.commited_in}`); + // } else if (res.status === 'TxWaitingCipher') { + // // we received a tx but we don't have the cipher + // console.debug(`received notification in output ${res.commited_in}, waiting for cipher message`); + // } else if (res.status === 'CipherWaitingTx') { + // // we received a cipher but we don't have the key + // console.debug(`received a cipher`); + // } else if (res.status === 'SentWaitingConfirmation') { + // // We are sender and we're waiting for the challenge that will confirm recipient got the transaction and the message + // } else if (res.status === 'MustSpendConfirmation') { + // // we received a challenge for a notification we made + // // that means we can stop rebroadcasting the tx and we must spend the challenge to confirm + // window.alert(`Spending ${res.confirmed_by} to prove our identity`); + // console.debug(`sending confirm message to ${res.recipient}`); + // } else if (res.status === 'ReceivedMustConfirm') { + // // we found a notification and decrypted the cipher + // window.alert(`Received message from ${res.sender}\n${res.plaintext}`); + // // we must spend the commited_in output to sender + // } else if (res.status === 'Complete') { + // window.alert(`Received confirmation that ${res.sender} is the author of message ${res.plaintext}`) + // } else { + // console.debug('Received an unimplemented valid message'); + // } } catch (error) { console.error('Received an invalid message:', error); } diff --git a/vite.config.ts b/vite.config.ts index f730b7e..6a2636c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,6 +4,9 @@ import wasm from 'vite-plugin-wasm'; import {createHtmlPlugin} from 'vite-plugin-html'; export default defineConfig({ + optimizeDeps: { + include: ['qrcode'] + }, plugins: [ vue(), // or react() if using React wasm(), @@ -14,6 +17,7 @@ export default defineConfig({ ], build: { outDir: 'dist', + target: 'esnext', rollupOptions: { input: './src/index.ts', output: { From 5f110fbaaf68b2e398ed798b41cce3df4d5fe569 Mon Sep 17 00:00:00 2001 From: AnisHADJARAB Date: Wed, 14 Aug 2024 08:39:31 +0000 Subject: [PATCH 02/33] WIP pairing --- package-lock.json | 6 ++ package.json | 1 + public/style/4nk.css | 3 + src/html/home.html | 18 ++-- src/html/home.js | 63 +++++++++---- src/html/login-modal.html | 9 ++ src/html/login-modal.js | 14 +++ src/index.html | 2 +- src/index.ts | 11 ++- src/scanner.js | 16 ++++ src/services/routing.service.ts | 53 +++++++++++ src/services/service.ts | 56 ++++++++++-- src/websockets.ts | 151 +++++++++++++++++++------------- 13 files changed, 311 insertions(+), 92 deletions(-) create mode 100644 src/html/login-modal.html create mode 100644 src/html/login-modal.js create mode 100644 src/scanner.js diff --git a/package-lock.json b/package-lock.json index 89fbad1..32b5057 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@types/qrcode": "^1.5.5", "@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-vue": "^5.0.5", + "html5-qrcode": "^2.3.8", "qrcode": "^1.5.3", "vite": "^5.3.3", "vite-plugin-copy": "^0.1.6", @@ -3571,6 +3572,11 @@ } } }, + "node_modules/html5-qrcode": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz", + "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==" + }, "node_modules/htmlparser2": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz", diff --git a/package.json b/package.json index 3575293..dd26221 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@types/qrcode": "^1.5.5", "@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-vue": "^5.0.5", + "html5-qrcode": "^2.3.8", "qrcode": "^1.5.3", "vite": "^5.3.3", "vite-plugin-copy": "^0.1.6", diff --git a/public/style/4nk.css b/public/style/4nk.css index d481fe2..abf34bd 100644 --- a/public/style/4nk.css +++ b/public/style/4nk.css @@ -360,6 +360,9 @@ body { border-bottom: none; } + .qr-code-scanner { + display: none; + } diff --git a/src/html/home.html b/src/html/home.html index 09bab2d..3cc3c57 100644 --- a/src/html/home.html +++ b/src/html/home.html @@ -56,18 +56,24 @@ Scan your other device :
- QR Code + QR Code +
+
+
+
- OK + OK
- + diff --git a/src/html/home.js b/src/html/home.js index 97c0a42..caf702d 100644 --- a/src/html/home.js +++ b/src/html/home.js @@ -1,3 +1,4 @@ +import Routing from "/src/services/routing.service.ts"; import Services from "/src/services/service.ts"; document.querySelectorAll('.tab').forEach(tab => { @@ -22,25 +23,14 @@ document.querySelectorAll('.tab').forEach(tab => { } } - + //// Modal - export function openModal() { - document.getElementById('modal').style.display = 'flex'; + export async function openModal() { + const router = await Routing.getInstance(); + router.openLoginModal() } - function closeModal() { - document.getElementById('modal').style.display = 'none'; - } - - // Close modal when clicking outside of it - window.onclick = function(event) { - const modal = document.getElementById('modal'); - if (event.target === modal) { - closeModal(); - } - } - function openCloseNotifications() { const notifications = document.querySelector('.notification-board') notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none' @@ -50,4 +40,45 @@ const service = await Services.getInstance() service.setNotification() window.toggleMenu = toggleMenu; -window.openModal = openModal; \ No newline at end of file +window.openModal = openModal; + +/// Scan QR Code +function docReady(fn) { + // see if DOM is already available + if (document.readyState === "complete" + || document.readyState === "interactive") { + // call on next available tick + setTimeout(fn, 1); + } else { + document.addEventListener("DOMContentLoaded", fn); + } +} + +docReady(function () { + var resultContainer = document.getElementById('qr-reader-results'); + var lastResult, countResults = 0; + function onScanSuccess(decodedText, decodedResult) { + // if (decodedText !== lastResult) { + ++countResults; + lastResult = decodedText; + // Handle on success condition with the decoded message. + console.log(`Scan result ${decodedText}`, decodedResult); + service.sendPairingTx(decodedText) + // } + } + + var html5QrcodeScanner = new Html5QrcodeScanner( + "qr-reader", { fps: 10, qrbox: 250 }); + html5QrcodeScanner.render(onScanSuccess); +}); + +function scanDevice() { + service.sendPairingTx('decodedText') + + // const scannerImg = document.querySelector('#scanner') + // if(scannerImg) scannerImg.style.display = 'none' + // const scannerQrCode = document.querySelector('.qr-code-scanner') + // if(scannerQrCode) scannerQrCode.style.display = 'block' +} + +window.scanDevice = scanDevice \ No newline at end of file diff --git a/src/html/login-modal.html b/src/html/login-modal.html new file mode 100644 index 0000000..48677b1 --- /dev/null +++ b/src/html/login-modal.html @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/src/html/login-modal.js b/src/html/login-modal.js new file mode 100644 index 0000000..f5fe78a --- /dev/null +++ b/src/html/login-modal.js @@ -0,0 +1,14 @@ +import Routing from "/src/services/routing.service.ts"; + +const router = await Routing.getInstance(); +export async function confirmLogin() { + router.confirmLogin() +} + +export async function closeLoginModal() { + router.closeLoginModal() +} + + +window.confirmLogin = confirmLogin; +window.closeLoginModal = closeLoginModal; \ No newline at end of file diff --git a/src/index.html b/src/index.html index cc7b87b..2e696aa 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,7 @@ + 4NK Application @@ -14,6 +15,5 @@
- \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 1ccdb1e..5db8ed8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,18 +1,23 @@ import Services from './services/service'; // import { WebSocketClient } from './websockets'; -const wsurl = `wss://${window.location.hostname}:3001/ws/`; +const wsurl = `ws://74.234.68.175:8090`; document.addEventListener('DOMContentLoaded', async () => { try { const services = await Services.getInstance(); let user = await services.getWallet() console.log("πŸš€ ~ document.addEventListener ~ user:", user); - + const device = await services.dumpDevice() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ device:", device) + const wallet = await services.dumpWallet() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ wallet:", wallet) + const amount = await services.getAmount() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ amount:", amount) + // services.sendPairingTx('sprt1qqfgf9xm5cxsyj49h3d9kqd0f0f0q0zj6pu5we9k4g7l7axkwsqavqqjsj2dhfsdqf92t0z6tvq67j7j7q7995regajtd23ala6dvaqp6cqravfjh') if(!user) { const sp_adress = await services.createNewDevice(); user = await services.getWallet() - console.log("πŸš€ ~ document.addEventListener ~ sp_adress:", sp_adress) } await services.getAdresses() diff --git a/src/scanner.js b/src/scanner.js new file mode 100644 index 0000000..fe4d1c2 --- /dev/null +++ b/src/scanner.js @@ -0,0 +1,16 @@ +function onScanSuccess(decodedText, decodedResult) { + // handle the scanned code as you like, for example: + console.log(`Code matched = ${decodedText}`, decodedResult); + } + + function onScanFailure(error) { + // handle scan failure, usually better to ignore and keep scanning. + // for example: + console.warn(`Code scan error = ${error}`); + } + + let html5QrcodeScanner = new Html5QrcodeScanner( + "reader", + { fps: 10, qrbox: {width: 250, height: 250} }, + /* verbose= */ false); + html5QrcodeScanner.render(onScanSuccess, onScanFailure); \ No newline at end of file diff --git a/src/services/routing.service.ts b/src/services/routing.service.ts index e69de29..32b4763 100644 --- a/src/services/routing.service.ts +++ b/src/services/routing.service.ts @@ -0,0 +1,53 @@ +import Database from './database'; +import modalHtml from '../html/login-modal.html?raw'; +import modalScript from '../html/login-modal.js?raw'; + + +export default class Routing { + private static instance: Routing; + private database: any; + private sdkClient: any; + private constructor() {} + + // Method to access the singleton instance of Services + public static async getInstance(): Promise { + if (!Routing.instance) { + Routing.instance = new Routing(); + await Routing.instance.init(); + } + return Routing.instance; + } + + public async init(): Promise { + this.sdkClient = await import("../../dist/pkg/sdk_client"); + this.database = Database.getInstance() + } + + public openLoginModal() { + const container = document.querySelector('.page-container'); + if (container) container.innerHTML += modalHtml; + const modal = document.getElementById('modal') + if (modal) modal.style.display = 'flex'; + const newScript = document.createElement('script'); + newScript.setAttribute('type', 'module') + newScript.textContent = modalScript; + document.head.appendChild(newScript).parentNode?.removeChild(newScript); + // Close modal when clicking outside of it + window.onclick = (event) => { + const modal = document.getElementById('modal'); + if (event.target === modal) { + this.closeLoginModal(); + } + } + } + confirmLogin() { + console.log('=============> Confirm Login') + const loginTx = this.sdkClient.create_login_transaction(1) + console.log("πŸš€ ~ Routing ~ confirmLogin ~ loginTx:", loginTx) + this.sdkClient.login('LOGIN', loginTx) + } + closeLoginModal() { + const modal = document.getElementById('modal') + if (modal) modal.style.display = 'none'; + } +} \ No newline at end of file diff --git a/src/services/service.ts b/src/services/service.ts index d947e9d..d6549d2 100644 --- a/src/services/service.ts +++ b/src/services/service.ts @@ -13,7 +13,7 @@ export default class Services { private static instance: Services; private current_process: string | null = null; private sdkClient: any; - // private websocketConnection: WebSocketClient[] = []; + private websocketConnection: WebSocketClient | null = null; private sp_address: string | null = null; private processes: IProcess[] | null = null; private notifications: INotification[] | null = null; @@ -41,9 +41,9 @@ export default class Services { public async addWebsocketConnection(url: string): Promise { const services = await Services.getInstance(); const newClient = new WebSocketClient(url, services); - // if (!services.websocketConnection.includes(newClient)) { - // services.websocketConnection.push(newClient); - // } + if (!services.websocketConnection) { + services.websocketConnection = newClient; + } } public async recoverInjectHtml(): Promise { const container = document.getElementById('containerId'); @@ -53,7 +53,6 @@ export default class Services { return; } - const services = await Services.getInstance(); container.innerHTML = homePage; const newScript = document.createElement('script') @@ -81,6 +80,51 @@ export default class Services { } } + async sendPairingTx(sp_address: string): Promise { + const services = await Services.getInstance(); + const faucetMessage = await services.createFaucetMessage() + console.log("πŸš€ ~ WebSocketClient ~ this.ws.onopen= ~ faucetMessage:", faucetMessage, services.websocketConnection) + services.websocketConnection?.sendNormalMessage(faucetMessage) + const amount = await services.sdkClient.get_available_amount() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ amount:", amount) + // setTimeout(() => services.sdkClient.create_pairing_transaction('sprt1qqfgf9xm5cxsyj49h3d9kqd0f0f0q0zj6pu5we9k4g7l7axkwsqavqqjsj2dhfsdqf92t0z6tvq67j7j7q7995regajtd23ala6dvaqp6cqravfjh', 0.00000001), 5000) + setTimeout(() => services.sdkClient.create_pairing_transaction('sprt1qqv35lxum62lpm4zmfekjqsskx62clzx5qgsfyrgdu78vj52fync52q7fp2h6lugyfnuk8z32lycandds97nc74sz7nc7e90f9tl2dtzpeshg8nss', 0.00001), 5000) + } + + async parseNewTx(tx: string) { + try { + console.log('==============> sendind txxxxxxx parser', tx) + const services = await Services.getInstance(); + const parsedTx = await services.sdkClient.parse_new_tx(tx, 0, 0.00001) + console.log("πŸš€ ~ Services ~ parseNewTx ~ parsedTx:", parsedTx) + } catch(e) { + console.log(e) + } + } + + async getAmount() { + const services = await Services.getInstance(); + const amount = await services.sdkClient.get_available_amount() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ amount:", amount) + } + + async dumpDevice() { + const services = await Services.getInstance(); + const device = await services.sdkClient.dump_device() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ device:", device) + } + async dumpWallet() { + const services = await Services.getInstance(); + const wallet = await services.sdkClient.dump_wallet() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ wallet:", wallet) + } + + async createFaucetMessage() { + const services = await Services.getInstance() + const message = await services.sdkClient.create_faucet_msg() + return message; + } + private addSubscription(element: Element, event: string, eventHandler: string): void { this.subscriptions.push({ element, event, eventHandler }); element.addEventListener(event, (this as any)[eventHandler].bind(this)); @@ -233,6 +277,8 @@ export default class Services { } async getProcesses(): Promise { + const processes = this.sdkClient.get_processes() + console.log("πŸš€ ~ Services ~ getProcesses ~ processes:", processes) return [ { id: 1, diff --git a/src/websockets.ts b/src/websockets.ts index 9389eee..12b2099 100644 --- a/src/websockets.ts +++ b/src/websockets.ts @@ -9,71 +9,94 @@ class WebSocketClient { constructor(url: string, private services: Services) { this.ws = new WebSocket(url); - this.ws.addEventListener('open', (event) => { - console.log('WebSocket connection established'); - // Once the connection is open, send all messages in the queue - while (this.messageQueue.length > 0) { - const message = this.messageQueue.shift(); - if (message) { - this.ws.send(message); - } - } - }); + if(this.ws !== null) { + this.ws.onopen = async (event) => { + console.log('WebSocket connection established'); + // Once the connection is open, send all messages in the queue + const services = await Services.getInstance() + // const faucetMessage = await services.createFaucetMessage() + // console.log("πŸš€ ~ WebSocketClient ~ this.ws.onopen= ~ faucetMessage:", faucetMessage) + // this.sendNormalMessage(faucetMessage) - // Listen for messages - this.ws.addEventListener('message', (event) => { - const msgData = event.data; - - (async () => { - console.log(msgData); - if (typeof(msgData) === 'string') { - console.log("Received text message: "+msgData); - try { - const feeRate = 1; - // By parsing the message, we can link it with existing cached message and return the updated version of the message - // if (res.status === 'FaucetComplete') { - // // we received a faucet tx, there's nothing else to do - // window.alert(`New faucet output\n${res.commited_in}`); - // } else if (res.status === 'TxWaitingCipher') { - // // we received a tx but we don't have the cipher - // console.debug(`received notification in output ${res.commited_in}, waiting for cipher message`); - // } else if (res.status === 'CipherWaitingTx') { - // // we received a cipher but we don't have the key - // console.debug(`received a cipher`); - // } else if (res.status === 'SentWaitingConfirmation') { - // // We are sender and we're waiting for the challenge that will confirm recipient got the transaction and the message - // } else if (res.status === 'MustSpendConfirmation') { - // // we received a challenge for a notification we made - // // that means we can stop rebroadcasting the tx and we must spend the challenge to confirm - // window.alert(`Spending ${res.confirmed_by} to prove our identity`); - // console.debug(`sending confirm message to ${res.recipient}`); - // } else if (res.status === 'ReceivedMustConfirm') { - // // we found a notification and decrypted the cipher - // window.alert(`Received message from ${res.sender}\n${res.plaintext}`); - // // we must spend the commited_in output to sender - // } else if (res.status === 'Complete') { - // window.alert(`Received confirmation that ${res.sender} is the author of message ${res.plaintext}`) - // } else { - // console.debug('Received an unimplemented valid message'); - // } - } catch (error) { - console.error('Received an invalid message:', error); + while (this.messageQueue.length > 0) { + const message = this.messageQueue.shift(); + if (message) { + this.ws.send(message); } - } else { - console.error('Received a non-string message'); } - })(); - }); + }; + + // Listen for messages + this.ws.onmessage = (event) => { + const msgData = event.data; + + console.log("Received text message: ", msgData); + (async () => { + const services = await Services.getInstance() - // Listen for possible errors - this.ws.addEventListener('error', (event) => { - console.error('WebSocket error:', event); - }); + if (typeof msgData === 'string') { + try { + const feeRate = 0.0001; + const parsedMessage = JSON.parse(msgData) + console.log("πŸš€ ~ WebSocketClient ~ parsedMessage:", parsedMessage) + if(parsedMessage?.flag === 'NewTx') { + // const content = parsedMessage?.content; + // if(content) { + // const parsedContent = JSON.parse(content) + // if(parsedContent?.transaction) + console.log("πŸš€ ~ WebSocketClient ~ msgData:", msgData) + const services = await Services.getInstance() - // Listen for when the connection is closed - this.ws.addEventListener('close', (event) => { - console.log('WebSocket is closed now.'); - }); + await services.parseNewTx(parsedMessage.content) + // } + + } + // By parsing the message, we can link it with existing cached message and return the updated version of the message + // if (res.status === 'FaucetComplete') { + // // we received a faucet tx, there's nothing else to do + // window.alert(`New faucet output\n${res.commited_in}`); + // } else if (res.status === 'TxWaitingCipher') { + // // we received a tx but we don't have the cipher + // console.debug(`received notification in output ${res.commited_in}, waiting for cipher message`); + // } else if (res.status === 'CipherWaitingTx') { + // // we received a cipher but we don't have the key + // console.debug(`received a cipher`); + // } else if (res.status === 'SentWaitingConfirmation') { + // // We are sender and we're waiting for the challenge that will confirm recipient got the transaction and the message + // } else if (res.status === 'MustSpendConfirmation') { + // // we received a challenge for a notification we made + // // that means we can stop rebroadcasting the tx and we must spend the challenge to confirm + // window.alert(`Spending ${res.confirmed_by} to prove our identity`); + // console.debug(`sending confirm message to ${res.recipient}`); + // } else if (res.status === 'ReceivedMustConfirm') { + // // we found a notification and decrypted the cipher + // window.alert(`Received message from ${res.sender}\n${res.plaintext}`); + // // we must spend the commited_in output to sender + // } else if (res.status === 'Complete') { + // window.alert(`Received confirmation that ${res.sender} is the author of message ${res.plaintext}`) + // } else { + // console.debug('Received an unimplemented valid message'); + // } + } catch (error) { + console.error('Received an invalid message:', error); + } + } else { + console.error('Received a non-string message'); + } + })(); + }; + + // Listen for possible errors + this.ws.onerror = (event) => { + console.error('WebSocket error:', event); + }; + + // Listen for when the connection is closed + this.ws.onclose = (event) => { + console.log('WebSocket is closed now.'); + } + } + } // Method to send messages @@ -83,7 +106,7 @@ class WebSocketClient { 'flag': flag, 'content': message } - // console.debug("Sending message:", JSON.stringify(networkMessage)); + console.log("Sending message:", JSON.stringify(networkMessage)); this.ws.send(JSON.stringify(networkMessage)); } else { console.warn('WebSocket is not open. ReadyState:', this.ws.readyState); @@ -95,6 +118,12 @@ class WebSocketClient { return this.ws.url; } + public sendNormalMessage(message: string) { + this.ws.send(message); + console.log("Sending message:", JSON.stringify(message)); + + } + // Method to close the WebSocket connection public close(): void { this.ws.close(); From 033b92eed8c0ddaa4e35556b8434f32f4eee6555 Mon Sep 17 00:00:00 2001 From: AnisHADJARAB Date: Tue, 3 Sep 2024 13:39:07 +0000 Subject: [PATCH 03/33] poc pairing with device1 side missing popup --- src/html/home.html | 2 +- src/html/home.js | 4 +- src/html/login-modal.js | 1 - src/index.ts | 26 ++-- src/services/database.ts | 7 +- src/services/routing.service.ts | 10 +- src/services/service.ts | 229 +++++++++++++++++++++++++++++--- src/websockets.ts | 38 +++--- 8 files changed, 257 insertions(+), 60 deletions(-) diff --git a/src/html/home.html b/src/html/home.html index 3cc3c57..86ef726 100644 --- a/src/html/home.html +++ b/src/html/home.html @@ -21,7 +21,7 @@
Import - +
diff --git a/src/html/home.js b/src/html/home.js index caf702d..85464cf 100644 --- a/src/html/home.js +++ b/src/html/home.js @@ -25,9 +25,9 @@ document.querySelectorAll('.tab').forEach(tab => { //// Modal - export async function openModal() { + export async function openModal(prd) { const router = await Routing.getInstance(); - router.openLoginModal() + router.openLoginModal(prd) } diff --git a/src/html/login-modal.js b/src/html/login-modal.js index f5fe78a..c47c7c2 100644 --- a/src/html/login-modal.js +++ b/src/html/login-modal.js @@ -9,6 +9,5 @@ export async function closeLoginModal() { router.closeLoginModal() } - window.confirmLogin = confirmLogin; window.closeLoginModal = closeLoginModal; \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 5db8ed8..f140d45 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,22 +7,20 @@ document.addEventListener('DOMContentLoaded', async () => { const services = await Services.getInstance(); let user = await services.getWallet() - console.log("πŸš€ ~ document.addEventListener ~ user:", user); - const device = await services.dumpDevice() - console.log("πŸš€ ~ Services ~ sendPairingTx ~ device:", device) - const wallet = await services.dumpWallet() - console.log("πŸš€ ~ Services ~ sendPairingTx ~ wallet:", wallet) - const amount = await services.getAmount() - console.log("πŸš€ ~ Services ~ sendPairingTx ~ amount:", amount) - // services.sendPairingTx('sprt1qqfgf9xm5cxsyj49h3d9kqd0f0f0q0zj6pu5we9k4g7l7axkwsqavqqjsj2dhfsdqf92t0z6tvq67j7j7q7995regajtd23ala6dvaqp6cqravfjh') - if(!user) { - const sp_adress = await services.createNewDevice(); - user = await services.getWallet() - console.log("πŸš€ ~ document.addEventListener ~ sp_adress:", sp_adress) - } - await services.getAdresses() + + setTimeout(async () => { + if(!user) { + const sp_adress = await services.createNewDevice(); + user = await services.getWallet() + + } else { + const address = await services.getAdresses() + const device = await services.getDevice() + if(device) await services.restoreDevice(device) + } await services.addWebsocketConnection(wsurl); await services.recoverInjectHtml() + }) } catch (error) { console.error(error); } diff --git a/src/services/database.ts b/src/services/database.ts index f14ba88..b3042aa 100644 --- a/src/services/database.ts +++ b/src/services/database.ts @@ -14,6 +14,11 @@ class Database { options: {'keyPath': 'sp_address'}, indices: [] }, + AnkCipherMessages: { + name: "ciphers", + options: {}, + indices: [ {'keyPath': 'id'}] + }, AnkSession: { name: "session", options: {}, @@ -32,7 +37,7 @@ class Database { }, AnkMessages: { name: "messages", - options: {'keyPath': 'id'}, + options: {'keyPath': 'transaction'}, indices: [] } } diff --git a/src/services/routing.service.ts b/src/services/routing.service.ts index 32b4763..cc0386b 100644 --- a/src/services/routing.service.ts +++ b/src/services/routing.service.ts @@ -1,12 +1,14 @@ import Database from './database'; import modalHtml from '../html/login-modal.html?raw'; import modalScript from '../html/login-modal.js?raw'; +import Services from './service'; export default class Routing { private static instance: Routing; private database: any; private sdkClient: any; + private prd: any; private constructor() {} // Method to access the singleton instance of Services @@ -23,7 +25,7 @@ export default class Routing { this.database = Database.getInstance() } - public openLoginModal() { + public openLoginModal(prd?: any) { const container = document.querySelector('.page-container'); if (container) container.innerHTML += modalHtml; const modal = document.getElementById('modal') @@ -36,7 +38,7 @@ export default class Routing { window.onclick = (event) => { const modal = document.getElementById('modal'); if (event.target === modal) { - this.closeLoginModal(); + this.closeLoginModal(prd); } } } @@ -46,8 +48,10 @@ export default class Routing { console.log("πŸš€ ~ Routing ~ confirmLogin ~ loginTx:", loginTx) this.sdkClient.login('LOGIN', loginTx) } - closeLoginModal() { + async closeLoginModal(prd?: any) { + const service = await Services.getInstance() const modal = document.getElementById('modal') if (modal) modal.style.display = 'none'; + if(prd) service.pairDevice(prd) } } \ No newline at end of file diff --git a/src/services/service.ts b/src/services/service.ts index d6549d2..7b107c0 100644 --- a/src/services/service.ts +++ b/src/services/service.ts @@ -8,6 +8,9 @@ import { IProcess } from '~/models/process.model'; import Database from './database'; import { WebSocketClient } from '../websockets'; import QRCode from 'qrcode' +import { servicesVersion } from 'typescript'; +import { CachedMessage } from '../../dist/pkg/sdk_client'; +import Routing from './routing.service'; export default class Services { private static instance: Services; @@ -25,6 +28,7 @@ export default class Services { // Method to access the singleton instance of Services public static async getInstance(): Promise { if (!Services.instance) { + console.log("πŸš€ ~ Services ~ getInstance ~ Services.instance:", Services.instance) Services.instance = new Services(); await Services.instance.init(); } @@ -80,43 +84,213 @@ export default class Services { } } + async prepareProcessTx(myAddress: string, recipientAddress: string) { + + const txid = '0'.repeat(64) + var vout = Number.MAX_SAFE_INTEGER; + const paringTemplate = { + "uuid": "", + "html": "", + "script": "", + "style": "", + "init_state": { + "roles": { + "owner": { + "members": [{sp_addresses: [myAddress]}, {sp_addresses:[recipientAddress]}], + "validation_rules": + [ + { + "quorum": 0.0, + "fields": [ + "roles", + "pairing_tx" + ], + "min_sig_member": 0.0 + } + ] + } + }, + "pairing_tx": "", + }, + "commited_in": `${txid}:4294967295` + } + + const service = await Services.getInstance(); + const process = await service.sdkClient.create_process_from_template(JSON.stringify(paringTemplate)) + console.log("πŸš€ ~ Services ~ prepareProcessTx ~ process:", process) + return process + } + async sendPairingTx(sp_address: string): Promise { const services = await Services.getInstance(); - const faucetMessage = await services.createFaucetMessage() - console.log("πŸš€ ~ WebSocketClient ~ this.ws.onopen= ~ faucetMessage:", faucetMessage, services.websocketConnection) - services.websocketConnection?.sendNormalMessage(faucetMessage) - const amount = await services.sdkClient.get_available_amount() + const amount = await this.getAmount() as any + console.log("πŸš€ ~ Services ~ sendPairingTx ~ amount:", typeof amount) console.log("πŸš€ ~ Services ~ sendPairingTx ~ amount:", amount) - // setTimeout(() => services.sdkClient.create_pairing_transaction('sprt1qqfgf9xm5cxsyj49h3d9kqd0f0f0q0zj6pu5we9k4g7l7axkwsqavqqjsj2dhfsdqf92t0z6tvq67j7j7q7995regajtd23ala6dvaqp6cqravfjh', 0.00000001), 5000) - setTimeout(() => services.sdkClient.create_pairing_transaction('sprt1qqv35lxum62lpm4zmfekjqsskx62clzx5qgsfyrgdu78vj52fync52q7fp2h6lugyfnuk8z32lycandds97nc74sz7nc7e90f9tl2dtzpeshg8nss', 0.00001), 5000) + if(amount === 0n) { + const faucetMessage = await services.createFaucetMessage() + console.log("πŸš€ ~ WebSocketClient ~ this.ws.onopen= ~ faucetMessage:", faucetMessage) + services.websocketConnection?.sendNormalMessage(faucetMessage) + } + + const spAddress = await this.getDeviceAddress() as any + const process = await this.prepareProcessTx(spAddress, 'sprt1qqdxya9n4pzc9vetzug7fch2xag4x5vxxrjc6rnh2rh3xhlvalmlrsqmy5t6vfa0nuf92dudf9uvaye3afw6uu86kw34q2x3k9qmmf8qp0vtfm9xa') + if(process) await services.sdkClient.pair_device(process.uuid, ['sprt1qqdxya9n4pzc9vetzug7fch2xag4x5vxxrjc6rnh2rh3xhlvalmlrsqmy5t6vfa0nuf92dudf9uvaye3afw6uu86kw34q2x3k9qmmf8qp0vtfm9xa']) + setTimeout(async () => { + const tx = await services.sdkClient.create_process_init_transaction(process, 1) + console.log("πŸš€ ~ Services ~ sendPairingTx ~ tx:", tx) + services.websocketConnection?.sendMessage('NewTx', JSON.stringify(tx)) + if(tx?.new_messages && tx.new_messages.length) { + await this.sendCipherMessages(tx.new_messages) + } + },2000) + // setTimeout(() => { + // const paringin = services.sdkClient.create_pairing_transaction('sprt1qqf7jes989hkmfh0w9526pqy0rd5hlflclzez5dzateeza7hhl0vqzqhnmhe0kkez9m5vx2rastph5patqr5h3tr9pcsukzea0lz0dp6tcqaz2u8j', 1) + // console.log("πŸš€ ~ Services ~ setTimeout ~ paringin:", paringin) + // services.websocketConnection?.sendMessage('NewTx', JSON.stringify(paringin)) + // if(paringin?.new_network_msg?.ciphertext) { + // services.websocketConnection?.sendMessage('Cipher', paringin?.new_network_msg?.ciphertext) + // let get_outputs_result = services.sdkClient.get_outputs() + // console.log("πŸš€ ~ Services ~ setTimeout ~ get_outputs_result:", get_outputs_result) + // } + // }, 5000) + } + + async sendCipherMessages(messages: CachedMessage[]) { + const service = await Services.getInstance(); + messages.forEach((message) => { + message.cipher?.forEach((cipher => { + service.websocketConnection?.sendMessage('Cipher', cipher) + })) + }) + } + + async sendFaucetMessage(): Promise { + const services = await Services.getInstance(); + const faucetMessage = await services.createFaucetMessage() + console.log("πŸš€ ~ WebSocketClient ~ this.ws.onopen= ~ faucetMessage:", faucetMessage) + services.websocketConnection?.sendNormalMessage(faucetMessage) + } + + async parseCipher(message: string) { + try { + const services = await Services.getInstance(); + const parsedTx = await services.sdkClient.parse_cipher(message, 0.00001) + console.log("πŸš€ ~ Services ~ parseCipher ~ parsedTx:", parsedTx) + await this.processTx(parsedTx) + await this.saveCipherTxToDb(parsedTx) + } catch(e) { + console.log(e) + } } async parseNewTx(tx: string) { try { - console.log('==============> sendind txxxxxxx parser', tx) + console.log('==============> sending txxxxxxx parser', tx) const services = await Services.getInstance(); - const parsedTx = await services.sdkClient.parse_new_tx(tx, 0, 0.00001) + const parsedTx = await services.sdkClient.parse_new_tx(tx, 0, 0.01) console.log("πŸš€ ~ Services ~ parseNewTx ~ parsedTx:", parsedTx) + if(parsedTx) { + await this.processTx(parsedTx) + await this.saveTxToDb(parsedTx) + } } catch(e) { console.log(e) } } + async processTx(tx: CachedMessage) { + if(tx.status) { + switch(tx.status) { + case 'Opened': + if(tx.prd) { + const parsedPrd = JSON.parse(tx.prd) + console.log("πŸš€ ~ Services ~ processTx ~ Opened:", parsedPrd) + const router = await Routing.getInstance(); + + // Mocker le fait que c'est une transaction de connection + if(parsedPrd && parsedPrd.prd_type === 'Init') { + router.openLoginModal(parsedPrd) + } else if(parsedPrd && parsedPrd.prd_type === 'Signed') { + router.closeLoginModal() + } + } + break; + case 'TxWaitingPrd': + console.log("πŸš€ ~ Services ~ processTx ~ TxWaitingPrd:", tx) + break; + case 'CipherWaitingTx': + console.log("πŸš€ ~ Services ~ processTx ~ CipherWaitingTx:", tx) + break; + } + } + } + + async pairDevice(prd: any) { + const service = await Services.getInstance(); + await service.sdkClient.pair_device(prd.process_uuid, ['sprt1qqwp87lrahm2ye9kje45dqgsncvkg94fr7amrnaaflxkx6kn62za7uq4kpegfp3ks475e9jp7y0h0xzsqydkf35lg7g0kukr6zkynde552gk6z92n']) + const spAddress = await this.getDeviceAddress() as any + const process = await this.prepareProcessTx(spAddress, 'sprt1qqwp87lrahm2ye9kje45dqgsncvkg94fr7amrnaaflxkx6kn62za7uq4kpegfp3ks475e9jp7y0h0xzsqydkf35lg7g0kukr6zkynde552gk6z92n') + const tx = await service.sdkClient.create_process_init_transaction(process, 1) + for(const msg of tx.new_messages) { + msg.prd?.replace('Init', 'Signed') + } + console.log("πŸš€ ~ Services ~ pairDevice ~ tx:", tx) + service.websocketConnection?.sendMessage('NewTx', JSON.stringify(tx)) + } + + async saveTxToDb(tx: string) { + const database = await Database.getInstance(); + const indexedDb = await database.getDb(); + + if(tx) { + await database.writeObject(indexedDb, database.getStoreList().AnkMessages, tx, null); + } + } + + async saveCipherTxToDb(tx: string) { + const database = await Database.getInstance(); + const indexedDb = await database.getDb(); + + if(tx) { + await database.writeObject(indexedDb, database.getStoreList().AnkCipherMessages, tx, null); + } + } + async getAmount() { const services = await Services.getInstance(); const amount = await services.sdkClient.get_available_amount() console.log("πŸš€ ~ Services ~ sendPairingTx ~ amount:", amount) + return amount + } + + async getDeviceAddress() { + const services = await Services.getInstance(); + const address = await services.sdkClient.get_address() + console.log("πŸš€ ~ Services ~ sendPairingTx ~ address:", address) + return address } async dumpDevice() { const services = await Services.getInstance(); const device = await services.sdkClient.dump_device() console.log("πŸš€ ~ Services ~ sendPairingTx ~ device:", device) + return device } + + async saveDevice(device: any): Promise { + console.log("πŸš€ ~ Services ~ saveDevice ~ device:", device) + localStorage.setItem('wallet', device); + } + + async getDevice(): Promise { + return localStorage.getItem('wallet') + } + async dumpWallet() { const services = await Services.getInstance(); const wallet = await services.sdkClient.dump_wallet() console.log("πŸš€ ~ Services ~ sendPairingTx ~ wallet:", wallet) + return wallet } async createFaucetMessage() { @@ -141,25 +315,38 @@ export default class Services { async createNewDevice() { const service = await Services.getInstance(); - const device = await service.sdkClient.create_new_device(1994, 'regtest') - const adresses = await service.sdkClient.get_address() - console.log("πŸš€ ~ Services ~ createNewDevice ~ adresses:", adresses) - if(device) { - console.log("πŸš€ ~ Services ~ createNewDevice ~ device:", {sp_adress: device}) + const sp_address = await service.sdkClient.create_new_device(1994, 'regtest') + if(sp_address) { + console.log("πŸš€ ~ Services ~ createNewDevice ~ device:", {sp_adress: sp_address}) const database = await Database.getInstance(); const indexedDb = await database.getDb(); - await database.writeObject(indexedDb, database.getStoreList().AnkSpAddress, {sp_address: device}, null); + await database.writeObject(indexedDb, database.getStoreList().AnkSpAddress, {sp_address: sp_address}, null); + const device = await service.dumpDevice() + console.log("πŸš€ ~ WebSocketClient ~ device:", device) + await service.saveDevice(device) } - this.sp_address = device; - console.log("πŸš€ ~ Services ~ createNewDevice ~ device:", device) - return device; + this.sp_address = sp_address; + console.log("πŸš€ ~ Services ~ createNewDevice ~ device:", sp_address) + return sp_address; } async getAdresses() { - const service = await Services.getInstance(); - const adresses:string = await service.sdkClient.get_address() - console.log("πŸš€ ~ Services ~ createNewDevice ~ adresses:", adresses) - this.sp_address = adresses + const database = await Database.getInstance(); + const indexedDb = await database.getDb(); + const wallet = await database.getAll(indexedDb, database.getStoreList().AnkSpAddress) as {sp_address: string}[] + console.log("πŸš€ ~ Services ~ getWallet ~ wallet:", wallet) + if(wallet.length) { + this.sp_address = wallet[0].sp_address + } + return this.sp_address + } + + async restoreDevice(address: string) { + const services = await Services.getInstance(); + // const sp_wallet = JSON.parse(address)?.sp_wallet + console.log("πŸš€ ~ Services ~ restoreDevice ~ services?.sdkClient:", address) + const res = await services?.sdkClient?.restore_device(address) + console.log("πŸš€ ~ Services ~ restoreDevice ~ res:", res) } private cleanSubsciptions(): void { diff --git a/src/websockets.ts b/src/websockets.ts index 12b2099..a839ec9 100644 --- a/src/websockets.ts +++ b/src/websockets.ts @@ -1,5 +1,6 @@ -import { AnkFlag, AnkNetworkMsg, CachedMessage } from "dist/pkg/sdk_client"; +import { AnkFlag, CachedMessage } from "dist/pkg/sdk_client"; import Services from "./services/service"; +import Database from "./services/database"; // import { AnkFlag, AnkNetworkMsg, CachedMessage } from "../dist/pkg/sdk_client"; class WebSocketClient { @@ -13,9 +14,6 @@ class WebSocketClient { this.ws.onopen = async (event) => { console.log('WebSocket connection established'); // Once the connection is open, send all messages in the queue - const services = await Services.getInstance() - // const faucetMessage = await services.createFaucetMessage() - // console.log("πŸš€ ~ WebSocketClient ~ this.ws.onopen= ~ faucetMessage:", faucetMessage) // this.sendNormalMessage(faucetMessage) while (this.messageQueue.length > 0) { @@ -39,17 +37,19 @@ class WebSocketClient { const feeRate = 0.0001; const parsedMessage = JSON.parse(msgData) console.log("πŸš€ ~ WebSocketClient ~ parsedMessage:", parsedMessage) - if(parsedMessage?.flag === 'NewTx') { - // const content = parsedMessage?.content; - // if(content) { - // const parsedContent = JSON.parse(content) - // if(parsedContent?.transaction) - console.log("πŸš€ ~ WebSocketClient ~ msgData:", msgData) - const services = await Services.getInstance() - - await services.parseNewTx(parsedMessage.content) - // } - + const services = await Services.getInstance() + switch(parsedMessage.flag) { + case 'NewTx': + await services.parseNewTx(parsedMessage.content) + let device = await services.dumpDevice() + await services.saveDevice(device) + break; + case 'Cipher': + await services.parseCipher(parsedMessage.content) + // device = await services.dumpWallet() + // console.log("πŸš€ ~ WebSocketClient ~ device:", device) + // await services.saveDevice(device) + break; } // By parsing the message, we can link it with existing cached message and return the updated version of the message // if (res.status === 'FaucetComplete') { @@ -100,12 +100,16 @@ class WebSocketClient { } // Method to send messages - public sendMessage(flag: AnkFlag, message: string): void { + public async sendMessage(flag: AnkFlag, message: string): Promise { if (this.ws.readyState === WebSocket.OPEN) { - const networkMessage: AnkNetworkMsg = { + const networkMessage = { 'flag': flag, 'content': message } + // if(flag === 'Cipher') { + // const services = await Services.getInstance(); + // services.parseCipher(JSON.stringify(networkMessage)) + // } console.log("Sending message:", JSON.stringify(networkMessage)); this.ws.send(JSON.stringify(networkMessage)); } else { From cbdeb4345ae00c078a495c9bf0fb10a00315df3c Mon Sep 17 00:00:00 2001 From: AnisHADJARAB Date: Fri, 27 Sep 2024 15:12:37 +0000 Subject: [PATCH 04/33] fix pairing to adapt to latest version - still mocking ending --- public/style/4nk.css | 14 +- src/html/confirmation-modal.html | 15 ++ src/html/confirmation-modal.js | 13 ++ src/html/home.js | 14 +- src/html/login-modal.html | 13 +- src/index.ts | 9 +- src/services/database.ts | 2 +- src/services/routing.service.ts | 53 ++++++- src/services/service.ts | 262 +++++++++++++++++++------------ src/websockets.ts | 7 + vite.config.ts | 2 + 11 files changed, 281 insertions(+), 123 deletions(-) create mode 100644 src/html/confirmation-modal.html create mode 100644 src/html/confirmation-modal.js diff --git a/public/style/4nk.css b/public/style/4nk.css index abf34bd..852af49 100644 --- a/public/style/4nk.css +++ b/public/style/4nk.css @@ -20,6 +20,10 @@ body { background-blend-mode :soft-light; height: 100vh; } + .message { + font-size: 14px; + overflow-wrap: anywhere; + } /** Modal Css */ .modal { @@ -35,7 +39,7 @@ body { } .modal-content { - width: 40%; + width: 55%; height: 30%; background-color: white; border-radius: 4px; @@ -55,14 +59,14 @@ body { } .confirmation-box { - margin-top: 20px; + /* margin-top: 20px; */ align-content: center; width: 70%; height: 20%; - padding: 20px; - font-size: 1.6em; + /* padding: 20px; */ + font-size: 1.5em; color: #333333; - top: 20%; + top: 5%; position: relative; } diff --git a/src/html/confirmation-modal.html b/src/html/confirmation-modal.html new file mode 100644 index 0000000..2c3557c --- /dev/null +++ b/src/html/confirmation-modal.html @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/src/html/confirmation-modal.js b/src/html/confirmation-modal.js new file mode 100644 index 0000000..2349489 --- /dev/null +++ b/src/html/confirmation-modal.js @@ -0,0 +1,13 @@ +import Routing from "/src/services/routing.service.ts"; + +const router = await Routing.getInstance(); +export async function confirm() { + router.confirm() +} + +export async function closeConfirmationModal() { + router.closeConirmationModal() +} + +window.confirm = confirm; +window.closeConfirmationModal = closeConfirmationModal; \ No newline at end of file diff --git a/src/html/home.js b/src/html/home.js index 85464cf..0ad4963 100644 --- a/src/html/home.js +++ b/src/html/home.js @@ -25,9 +25,9 @@ document.querySelectorAll('.tab').forEach(tab => { //// Modal - export async function openModal(prd) { + export async function openModal(myAddress, receiverAddress) { const router = await Routing.getInstance(); - router.openLoginModal(prd) + router.openLoginModal(myAddress, receiverAddress) } @@ -73,12 +73,12 @@ docReady(function () { }); function scanDevice() { - service.sendPairingTx('decodedText') + // service.sendPairingTx('decodedText') - // const scannerImg = document.querySelector('#scanner') - // if(scannerImg) scannerImg.style.display = 'none' - // const scannerQrCode = document.querySelector('.qr-code-scanner') - // if(scannerQrCode) scannerQrCode.style.display = 'block' + const scannerImg = document.querySelector('#scanner') + if(scannerImg) scannerImg.style.display = 'none' + const scannerQrCode = document.querySelector('.qr-code-scanner') + if(scannerQrCode) scannerQrCode.style.display = 'block' } window.scanDevice = scanDevice \ No newline at end of file diff --git a/src/html/login-modal.html b/src/html/login-modal.html index 48677b1..a83dca2 100644 --- a/src/html/login-modal.html +++ b/src/html/login-modal.html @@ -1,9 +1,16 @@ -