diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 708e7a8e..0c4fda09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,7 +108,7 @@ importers: version: link:../packages/types '@vanilla-extract/vite-plugin': specifier: ^4.0.11 - version: 4.0.15(@types/node@22.5.1)(terser@5.31.6)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + version: 4.0.15(@types/node@22.5.1)(terser@5.31.6)(vite@5.4.9(@types/node@22.5.1)(terser@5.31.6)) '@vitest/coverage-v8': specifier: ^1.5.2 version: 1.6.0(vitest@1.6.0(@types/node@22.5.1)(happy-dom@15.7.4)(jsdom@25.0.0)(terser@5.31.6)) @@ -277,10 +277,10 @@ importers: version: 0.7.39 '@vanilla-extract/vite-plugin': specifier: ^4.0.13 - version: 4.0.15(@types/node@20.16.1)(terser@5.31.6)(vite@5.4.2(@types/node@20.16.1)(terser@5.31.6)) + version: 4.0.15(@types/node@20.16.1)(terser@5.31.6)(vite@5.4.9(@types/node@20.16.1)(terser@5.31.6)) '@vitejs/plugin-react': specifier: ^4.3.1 - version: 4.3.1(vite@5.4.2(@types/node@20.16.1)(terser@5.31.6)) + version: 4.3.1(vite@5.4.9(@types/node@20.16.1)(terser@5.31.6)) '@vitest/coverage-v8': specifier: ^1.6.0 version: 1.6.0(vitest@1.6.0(@types/node@20.16.1)(happy-dom@15.7.4)(jsdom@24.1.3)(terser@5.31.6)) @@ -339,6 +339,8 @@ importers: specifier: ^1.0.5 version: 1.0.6(@types/node@20.16.1)(happy-dom@15.7.4)(jsdom@24.1.3)(terser@5.31.6) + spirekey-web: {} + packages: '@adobe/css-tools@4.4.0': @@ -4239,6 +4241,9 @@ packages: picocolors@1.0.1: resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} + picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -4282,6 +4287,10 @@ packages: resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==} engines: {node: ^10 || ^12 || >=14} + postcss@8.4.47: + resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} + engines: {node: ^10 || ^12 || >=14} + prelude-ls@1.2.1: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} @@ -4720,6 +4729,10 @@ packages: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} @@ -5239,6 +5252,37 @@ packages: terser: optional: true + vite@5.4.9: + resolution: {integrity: sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + vitest-matchmedia-mock@1.0.6: resolution: {integrity: sha512-UUU0YY6BpmcuD2p4DpUVUP0afKuxHX6YAQs5J5skP+ksm+yXJHi9kSN5eOQuC0TFVTuXnIFPl0U9vGPNgnzA1g==} @@ -5771,8 +5815,8 @@ snapshots: '@ungap/structured-clone': 1.2.0 '@vanilla-extract/css': 1.15.5 '@vanilla-extract/integration': 7.1.9(@types/node@22.5.1)(terser@5.31.6) - '@vanilla-extract/vite-plugin': 4.0.15(@types/node@22.5.1)(terser@5.31.6)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) - '@vitejs/plugin-react-swc': 3.7.0(@swc/helpers@0.5.12)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + '@vanilla-extract/vite-plugin': 4.0.15(@types/node@22.5.1)(terser@5.31.6)(vite@5.4.9(@types/node@22.5.1)(terser@5.31.6)) + '@vitejs/plugin-react-swc': 3.7.0(@swc/helpers@0.5.12)(vite@5.4.9(@types/node@22.5.1)(terser@5.31.6)) '@vocab/webpack': 1.2.9(webpack@5.94.0) builtin-modules: 3.3.0 c12: 1.11.1(magicast@0.3.4) @@ -5803,7 +5847,7 @@ snapshots: type-fest: 3.13.1 typescript: 5.5.4 used-styles: 2.6.5 - vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + vite: 5.4.9(@types/node@22.5.1)(terser@5.31.6) transitivePeerDependencies: - '@swc/helpers' - '@types/node' @@ -7806,7 +7850,7 @@ snapshots: find-up: 5.0.0 javascript-stringify: 2.1.0 mlly: 1.7.1 - vite: 5.4.2(@types/node@20.16.1)(terser@5.31.6) + vite: 5.4.9(@types/node@20.16.1)(terser@5.31.6) vite-node: 1.6.0(@types/node@20.16.1)(terser@5.31.6) transitivePeerDependencies: - '@types/node' @@ -7832,7 +7876,7 @@ snapshots: find-up: 5.0.0 javascript-stringify: 2.1.0 mlly: 1.7.1 - vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + vite: 5.4.9(@types/node@22.5.1)(terser@5.31.6) vite-node: 1.6.0(@types/node@22.5.1)(terser@5.31.6) transitivePeerDependencies: - '@types/node' @@ -7877,10 +7921,10 @@ snapshots: dependencies: '@vanilla-extract/css': 1.14.2 - '@vanilla-extract/vite-plugin@4.0.15(@types/node@20.16.1)(terser@5.31.6)(vite@5.4.2(@types/node@20.16.1)(terser@5.31.6))': + '@vanilla-extract/vite-plugin@4.0.15(@types/node@20.16.1)(terser@5.31.6)(vite@5.4.9(@types/node@20.16.1)(terser@5.31.6))': dependencies: '@vanilla-extract/integration': 7.1.9(@types/node@20.16.1)(terser@5.31.6) - vite: 5.4.2(@types/node@20.16.1)(terser@5.31.6) + vite: 5.4.9(@types/node@20.16.1)(terser@5.31.6) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -7893,10 +7937,10 @@ snapshots: - supports-color - terser - '@vanilla-extract/vite-plugin@4.0.15(@types/node@22.5.1)(terser@5.31.6)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))': + '@vanilla-extract/vite-plugin@4.0.15(@types/node@22.5.1)(terser@5.31.6)(vite@5.4.9(@types/node@22.5.1)(terser@5.31.6))': dependencies: '@vanilla-extract/integration': 7.1.9(@types/node@22.5.1)(terser@5.31.6) - vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + vite: 5.4.9(@types/node@22.5.1)(terser@5.31.6) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -7928,21 +7972,21 @@ snapshots: - supports-color - terser - '@vitejs/plugin-react-swc@3.7.0(@swc/helpers@0.5.12)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))': + '@vitejs/plugin-react-swc@3.7.0(@swc/helpers@0.5.12)(vite@5.4.9(@types/node@22.5.1)(terser@5.31.6))': dependencies: '@swc/core': 1.7.18(@swc/helpers@0.5.12) - vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + vite: 5.4.9(@types/node@22.5.1)(terser@5.31.6) transitivePeerDependencies: - '@swc/helpers' - '@vitejs/plugin-react@4.3.1(vite@5.4.2(@types/node@20.16.1)(terser@5.31.6))': + '@vitejs/plugin-react@4.3.1(vite@5.4.9(@types/node@20.16.1)(terser@5.31.6))': dependencies: '@babel/core': 7.24.7 '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.24.7) '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.24.7) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.4.2(@types/node@20.16.1)(terser@5.31.6) + vite: 5.4.9(@types/node@20.16.1)(terser@5.31.6) transitivePeerDependencies: - supports-color @@ -10515,6 +10559,8 @@ snapshots: picocolors@1.0.1: {} + picocolors@1.1.1: {} + picomatch@2.3.1: {} picomatch@4.0.2: {} @@ -10568,6 +10614,12 @@ snapshots: picocolors: 1.0.1 source-map-js: 1.2.0 + postcss@8.4.47: + dependencies: + nanoid: 3.3.7 + picocolors: 1.1.1 + source-map-js: 1.2.1 + prelude-ls@1.2.1: {} prettier-plugin-organize-imports@3.2.4(prettier@3.3.3)(typescript@5.5.4): @@ -11094,6 +11146,8 @@ snapshots: source-map-js@1.2.0: {} + source-map-js@1.2.1: {} + source-map-support@0.5.21: dependencies: buffer-from: 1.1.2 @@ -11538,7 +11592,7 @@ snapshots: debug: 4.3.6 pathe: 1.1.2 picocolors: 1.0.1 - vite: 5.4.2(@types/node@20.16.1)(terser@5.31.6) + vite: 5.4.9(@types/node@20.16.1)(terser@5.31.6) transitivePeerDependencies: - '@types/node' - less @@ -11556,7 +11610,7 @@ snapshots: debug: 4.3.6 pathe: 1.1.2 picocolors: 1.0.1 - vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + vite: 5.4.9(@types/node@22.5.1)(terser@5.31.6) transitivePeerDependencies: - '@types/node' - less @@ -11574,7 +11628,7 @@ snapshots: debug: 4.3.6 pathe: 1.1.2 tinyrainbow: 1.2.0 - vite: 5.4.2(@types/node@20.16.1)(terser@5.31.6) + vite: 5.4.9(@types/node@20.16.1)(terser@5.31.6) transitivePeerDependencies: - '@types/node' - less @@ -11606,6 +11660,26 @@ snapshots: fsevents: 2.3.3 terser: 5.31.6 + vite@5.4.9(@types/node@20.16.1)(terser@5.31.6): + dependencies: + esbuild: 0.21.5 + postcss: 8.4.47 + rollup: 4.21.0 + optionalDependencies: + '@types/node': 20.16.1 + fsevents: 2.3.3 + terser: 5.31.6 + + vite@5.4.9(@types/node@22.5.1)(terser@5.31.6): + dependencies: + esbuild: 0.21.5 + postcss: 8.4.47 + rollup: 4.21.0 + optionalDependencies: + '@types/node': 22.5.1 + fsevents: 2.3.3 + terser: 5.31.6 + vitest-matchmedia-mock@1.0.6(@types/node@20.16.1)(happy-dom@15.7.4)(jsdom@24.1.3)(terser@5.31.6): dependencies: vitest: 2.0.5(@types/node@20.16.1)(happy-dom@15.7.4)(jsdom@24.1.3)(terser@5.31.6) @@ -11715,7 +11789,7 @@ snapshots: tinybench: 2.9.0 tinypool: 1.0.1 tinyrainbow: 1.2.0 - vite: 5.4.2(@types/node@20.16.1)(terser@5.31.6) + vite: 5.4.9(@types/node@20.16.1)(terser@5.31.6) vite-node: 2.0.5(@types/node@20.16.1)(terser@5.31.6) why-is-node-running: 2.3.0 optionalDependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 8d19c1fd..27db5a07 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - 'spirekey' + - 'spirekey-web' - 'sdk' - 'packages/*' - 'examples/*' diff --git a/spirekey-web/dist/assets/index-BxS8GbLC.css b/spirekey-web/dist/assets/index-BxS8GbLC.css new file mode 100644 index 00000000..af38b673 --- /dev/null +++ b/spirekey-web/dist/assets/index-BxS8GbLC.css @@ -0,0 +1 @@ +*,*:before,*:after{box-sizing:border-box}body{font-family:Inter,sans-serif;font-optical-sizing:auto;background-color:#020e1b;display:flex;flex-direction:column;max-width:43rem;width:100%;height:100dhw;align-items:center;justify-content:center;color:#ffffffb3;margin-inline:auto;padding-inline:.5rem}.code{font-family:Kode Mono,monospace;font-optical-sizing:auto}.card{background-color:#131e2bcc;color:#fffffff2;padding-inline:2.25rem;padding-block:1.5rem;border-radius:.5rem;border:1px solid #d2d4d640;width:100%}.footer{display:flex;width:100%;justify-content:flex-end}.action-bar{display:flex;width:100%;justify-content:flex-end;align-items:center;gap:1rem}a:not(.button){color:#3cbc92}.button{font-weight:500;font-size:.875rem;line-height:1.125rem;letter-spacing:0;background-color:#52ffc6;padding-block:.5rem;padding-inline:1.5rem;border-radius:2px;cursor:pointer;color:#000;text-decoration:none}.button.outline{background-color:transparent;color:#fff;box-shadow:0 0 0 1px #d2d4d640 inset} diff --git a/spirekey-web/dist/index.html b/spirekey-web/dist/index.html new file mode 100644 index 00000000..0c19b878 --- /dev/null +++ b/spirekey-web/dist/index.html @@ -0,0 +1,85 @@ + + + + + + Spirekey + + + + + + + +
+

+ Kadena SpireKey leverages WebAuthn standards to deliver secure backend, + enabling end users to generate and store keypairs directly on their + hardware devices. Developers can generate keypairs using the in-browser + SDK, integrate their application with SpireKey using the SDK package, or + explore the technical documentation outlined in the KIPs. +

+
+ Launch Chainweaver V3 Alpha + Install SDK Package +
+
+

Developer Resources

+ KIP-0023 + KIP-0030 + SpireKey Documentation + Discord Support +
+
+

Demo Applications

+
+

+ Demo Wallet +

+

+ Experience Kadena SpireKey authentication showcased with wallet + functionality +

+
+
+

+ Demo NFT Minting +

+

Mint your own NFT using SpireKey authentication

+
+ + +
+
+ + + diff --git a/spirekey-web/index.html b/spirekey-web/index.html new file mode 100644 index 00000000..a57e3577 --- /dev/null +++ b/spirekey-web/index.html @@ -0,0 +1,122 @@ + + + + + + Spirekey + + + + + + + +
+ +
+

+ Kadena SpireKey leverages WebAuthn standards to deliver secure + backend, enabling end users to generate and store keypairs directly on + their hardware devices. Developers can generate keypairs using the + in-browser SDK, integrate their application with SpireKey using the + SDK package, or explore the technical documentation outlined in the + KIPs. +

+
+ +
+
+ Launch Chainweaver V3 Alpha +
+
+ Install SDK Package +
+
+ +
+

Developer Resources

+
+
+ KIP-0023 + KIP-0030 +
+
+ Discord Support +
+
+
+ +
+

Demo Applications

+ +
+
+
+

+ + Chainweaver V3 Alpha (demo wallet) + +

+

+ Experience Kadena SpireKey authentication showcased with wallet + functionality +

+
+
+ +
+
+

+ NFT Minting +

+

Mint your own NFT using SpireKey authentication

+
+
+
+
+ +
+ + + diff --git a/spirekey-web/logo.svg b/spirekey-web/logo.svg new file mode 100644 index 00000000..6d83f481 --- /dev/null +++ b/spirekey-web/logo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/spirekey-web/package.json b/spirekey-web/package.json new file mode 100644 index 00000000..233d8019 --- /dev/null +++ b/spirekey-web/package.json @@ -0,0 +1,5 @@ +{ + "name": "@kadena/spirekey-web", + "version": "0.1.0", + "private": true +} diff --git a/spirekey-web/style.css b/spirekey-web/style.css new file mode 100644 index 00000000..29885623 --- /dev/null +++ b/spirekey-web/style.css @@ -0,0 +1,159 @@ +*, +*:before, +*:after { + box-sizing: border-box; +} + +body { + font-size: 16px; + font-family: 'Inter', sans-serif; + font-optical-sizing: auto; + background-color: #020e1b; + display: flex; + flex-direction: column; + max-width: 43rem; + width: 100%; + height: 100dhw; + align-items: center; + justify-content: center; + color: #ffffffb3; + margin-inline: auto; + padding-inline: 0.5rem; +} + +.code { + font-family: 'Kode Mono', monospace; + font-optical-sizing: auto; +} + +.card { + margin-block-start: 4rem; + display: flex; + flex-direction: column; + background-color: #131e2bcc; + color: #ffffffb3; + line-height: 130%; + font-weight: 400; + padding-inline: 2.25rem; + padding-block: 1.5rem; + border-radius: 0.5rem; + border: 1px solid #d2d4d640; + width: 100%; + gap: 3rem; +} + +.stack { + display: flex; + width: 100%; + + & .section { + width: 50%; + flex: 1; + + & > a:not(.button) { + display: block; + } + + .link { + margin-block-end: 1rem; + } + } +} + +.footer { + display: flex; + width: 100%; + justify-content: flex-end; + gap: 1rem; + padding-block-start: 1rem; + + a { + color: #ffffff66 !important; + text-decoration: none; + font-size: 0.6875rem; + + &:hover { + text-decoration: underline; + } + } +} + +.action-bar { + display: flex; + width: 100%; + justify-content: flex-end; + align-items: center; + gap: 1rem; +} + +a:not(.button) { + color: #3cbc92; +} + +.button { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.125rem; + letter-spacing: 0; + background-color: #52ffc6; + padding-block: 0.5rem; + padding-inline: 1.5rem; + border-radius: 2px; + cursor: pointer; + color: #000; + text-decoration: none; + + &.outline { + background-color: transparent; + color: #fff; + box-shadow: 0 0 0 1px #d2d4d640 inset; + } +} + +h2, +h3, +h4, +h5 { + font-weight: 500; + margin-block: 0rem; + padding: 0; + color: #fff; +} + +h3 { + margin-block-end: 1rem; +} + +.logo { + padding-block-end: 1rem; +} + +.main-text { + width: 80%; +} + +.tile { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-block-end: 0.5rem; + + p { + margin: 0; + } +} + +@media only screen and (max-width: 768px) { + .stack { + flex-direction: column; + gap: 1.5rem; + + .section { + width: 100%; + } + } + + .main-text { + width: 100%; + } +}