chore: use the old build step

# [0.1.0-develop.44](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.43...v0.1.0-develop.44) (2023-10-20)

### Bug Fixes

* add postinstall for patch-package ([a1968f4](a1968f43d0))

.github/workflows/ci.yml

@@ -0,0 +1,13 @@
+name: Build/Publish
+
+on:
+  push:
+      branches:
+          - master
+          - develop
+          - develop-*
+
+jobs:
+  main:
+      uses: lumeweb/github-node-deploy-workflow/.github/workflows/main.yml@master
+      secrets: inherit

.presetterrc.json

@@ -0,0 +1,32 @@
+{
+    "preset": [
+        "@lumeweb/node-library-preset"
+    ],
+    "config": {
+        "tsconfig": {
+            "compilerOptions": {
+                "moduleResolution": "bundler",
+                "typeRoots": [
+                    "src/vite-env.d.ts"
+                ],
+                "jsx": "react-jsx"
+            }
+        },
+        "tsconfig.build": {
+            "include": ["{buildSource}"],
+            "compilerOptions": {
+                "outDir": "{source}"
+            }
+        }
+    },
+    "variable": {
+        "source": "build",
+        "output": "lib",
+        "buildSource": "src"
+    },
+    "scripts": {
+        "build:vite": "vite build",
+        "build": "cross-env NODE_ENV=production run-s clean  build:typescript:* build:vite",
+        "clean:buildOutput": "shx rm -rf {source}"
+    }
+}

.storybook/main.ts

@@ -1,20 +1,19 @@
-import type { StorybookConfig } from "@storybook/react-vite"
-import { resolve } from "node:path"
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../stories", "../stories/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
   ],
   framework: {
     name: "@storybook/react-vite",
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: "tag"
-  }
-}
-export default config
+    autodocs: "tag",
+  },
+};
+export default config;

CHANGELOG.md

@@ -0,0 +1,270 @@
+# [0.1.0-develop.44](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.43...v0.1.0-develop.44) (2023-10-20)
+
+
+### Bug Fixes
+
+* add postinstall for patch-package ([a1968f4](https://git.lumeweb.com/LumeWeb/sdk/commit/a1968f43d02193b2c4fe1b40db56afb60e64a7df))
+
+# [0.1.0-develop.43](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.42...v0.1.0-develop.43) (2023-10-20)
+
+
+### Bug Fixes
+
+* positioning error ([88e08d1](https://git.lumeweb.com/LumeWeb/sdk/commit/88e08d13e27093768e3dfed3c015fefe7bb1bb8b))
+
+# [0.1.0-develop.42](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.41...v0.1.0-develop.42) (2023-10-20)
+
+
+### Bug Fixes
+
+* small ui problems ([2aa2a5f](https://git.lumeweb.com/LumeWeb/sdk/commit/2aa2a5ff30b43574e96b4057938a247ea72d446b))
+
+# [0.1.0-develop.41](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.40...v0.1.0-develop.41) (2023-10-20)
+
+
+### Bug Fixes
+
+* patch ([fe8a6a7](https://git.lumeweb.com/LumeWeb/sdk/commit/fe8a6a7de4d2ba9a4918348b6139182cc1dac0ea))
+
+# [0.1.0-develop.40](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.39...v0.1.0-develop.40) (2023-10-20)
+
+
+### Bug Fixes
+
+* patch ([a7f5ee2](https://git.lumeweb.com/LumeWeb/sdk/commit/a7f5ee266d8021996d55b3241e517ae273cea6fd))
+
+# [0.1.0-develop.39](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.38...v0.1.0-develop.39) (2023-10-16)
+
+
+### Bug Fixes
+
+* export LumeStatusContextType ([d074ef5](https://git.lumeweb.com/LumeWeb/sdk/commit/d074ef507d30c94739f6a5e7aaf2af36ccbf7116))
+
+# [0.1.0-develop.38](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.37...v0.1.0-develop.38) (2023-10-16)
+
+
+### Bug Fixes
+
+* fix import path ([f1f5d24](https://git.lumeweb.com/LumeWeb/sdk/commit/f1f5d24efa38a7d21621d618e566fb46d12ea5a6))
+* remove extension from import ([cdf20a8](https://git.lumeweb.com/LumeWeb/sdk/commit/cdf20a85cc5797c5781ad3625fc892f258373852))
+
+# [0.1.0-develop.37](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.36...v0.1.0-develop.37) (2023-10-13)
+
+# [0.1.0-develop.36](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.35...v0.1.0-develop.36) (2023-10-13)
+
+# [0.1.0-develop.35](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.34...v0.1.0-develop.35) (2023-10-13)
+
+# [0.1.0-develop.34](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.33...v0.1.0-develop.34) (2023-10-13)
+
+# [0.1.0-develop.33](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.32...v0.1.0-develop.33) (2023-10-12)
+
+
+### Bug Fixes
+
+* we need pascalCase ([7c35c45](https://git.lumeweb.com/LumeWeb/sdk/commit/7c35c45904559a28db6af4b76713ee7d7669bd95))
+
+# [0.1.0-develop.32](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.31...v0.1.0-develop.32) (2023-10-12)
+
+
+### Bug Fixes
+
+* camelCase the type, not the name ([461147b](https://git.lumeweb.com/LumeWeb/sdk/commit/461147b7ac0d33e6c60a10566ec2b7ad87406e02))
+
+# [0.1.0-develop.31](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.30...v0.1.0-develop.31) (2023-10-12)
+
+# [0.1.0-develop.30](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.29...v0.1.0-develop.30) (2023-10-12)
+
+
+### Bug Fixes
+
+* remove debug ([897405b](https://git.lumeweb.com/LumeWeb/sdk/commit/897405b092d7e0789226d6907ef3092c3ffb66e0))
+
+# [0.1.0-develop.29](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.28...v0.1.0-develop.29) (2023-10-12)
+
+
+### Bug Fixes
+
+* debug ([d77c4c2](https://git.lumeweb.com/LumeWeb/sdk/commit/d77c4c2a605a3ff695c35bd1f22759f830908ddc))
+* pass props to trigger and add disabled button styling ([cccdfde](https://git.lumeweb.com/LumeWeb/sdk/commit/cccdfdedbbb659106d294cb11c0638920db94783))
+
+# [0.1.0-develop.28](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.27...v0.1.0-develop.28) (2023-10-12)
+
+
+### Bug Fixes
+
+* handling of children ([d886b6f](https://git.lumeweb.com/LumeWeb/sdk/commit/d886b6f2d075af654ea173c607521e81af8d7bd6))
+
+# [0.1.0-develop.27](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.26...v0.1.0-develop.27) (2023-10-12)
+
+# [0.1.0-develop.26](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.25...v0.1.0-develop.26) (2023-10-12)
+
+# [0.1.0-develop.25](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.24...v0.1.0-develop.25) (2023-10-12)
+
+# [0.1.0-develop.24](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.23...v0.1.0-develop.24) (2023-10-12)
+
+# [0.1.0-develop.23](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.22...v0.1.0-develop.23) (2023-10-12)
+
+# [0.1.0-develop.22](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.21...v0.1.0-develop.22) (2023-10-12)
+
+
+### Bug Fixes
+
+* remove debug ([40ea3f9](https://git.lumeweb.com/LumeWeb/sdk/commit/40ea3f9fc0c779bec8a7215ecf37e1d649083be6))
+
+# [0.1.0-develop.21](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.20...v0.1.0-develop.21) (2023-10-12)
+
+
+### Bug Fixes
+
+* missing fetchAndUpdateNetworks call ([bf02385](https://git.lumeweb.com/LumeWeb/sdk/commit/bf023856b9e3f9dc6352a688f277ab4557f84dd4))
+
+# [0.1.0-develop.20](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.19...v0.1.0-develop.20) (2023-10-12)
+
+
+### Bug Fixes
+
+* debug ([ba38e6b](https://git.lumeweb.com/LumeWeb/sdk/commit/ba38e6be707e8d476aba4ad629679583c5917fcc))
+
+# [0.1.0-develop.19](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.18...v0.1.0-develop.19) (2023-10-12)
+
+
+### Bug Fixes
+
+* change fetchAndUpdateNetworks to be a cached callback ([f68070e](https://git.lumeweb.com/LumeWeb/sdk/commit/f68070e38c3549a952eb42fc8487fbeee34e8164))
+
+# [0.1.0-develop.18](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.17...v0.1.0-develop.18) (2023-10-12)
+
+
+### Bug Fixes
+
+* only use the private key, not extended ([dfe8739](https://git.lumeweb.com/LumeWeb/sdk/commit/dfe87396b9770a8c37d22bd7d30c0904bd16082c))
+
+# [0.1.0-develop.17](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.16...v0.1.0-develop.17) (2023-10-12)
+
+
+### Bug Fixes
+
+* abort and unsub if we unmount inside the loop, and check after the loop as well ([03434b4](https://git.lumeweb.com/LumeWeb/sdk/commit/03434b43292463602526ec590327e384a10e5f75))
+
+# [0.1.0-develop.16](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.15...v0.1.0-develop.16) (2023-10-12)
+
+
+### Bug Fixes
+
+* try to avoid unneeded re-rendering if we unmount while in the process of mounting ([92c18ca](https://git.lumeweb.com/LumeWeb/sdk/commit/92c18ca940b3d8651064d58600fdcf83298b305d))
+
+# [0.1.0-develop.15](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.14...v0.1.0-develop.15) (2023-10-12)
+
+
+### Bug Fixes
+
+* add all lumeweb libraries to external ([e1e82ad](https://git.lumeweb.com/LumeWeb/sdk/commit/e1e82adef8af6320e303be5877610fdde13de801))
+
+# [0.1.0-develop.14](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.13...v0.1.0-develop.14) (2023-10-11)
+
+
+### Bug Fixes
+
+* use init, not kernelLoaded ([4f5118f](https://git.lumeweb.com/LumeWeb/sdk/commit/4f5118fe34d0499b2835bece6cde5b5e7fdb8b87))
+
+# [0.1.0-develop.13](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.12...v0.1.0-develop.13) (2023-10-11)
+
+
+### Bug Fixes
+
+* fix types ([ef1d307](https://git.lumeweb.com/LumeWeb/sdk/commit/ef1d307b4b23b53797761bcc903ff5fd50b13471))
+
+# [0.1.0-develop.12](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.11...v0.1.0-develop.12) (2023-10-11)
+
+# [0.1.0-develop.11](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.10...v0.1.0-develop.11) (2023-10-10)
+
+
+### Bug Fixes
+
+* better components ([0db2a24](https://git.lumeweb.com/LumeWeb/sdk/commit/0db2a24f92b772c442c7e0285b7d4a02e01783b2))
+
+# [0.1.0-develop.10](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.9...v0.1.0-develop.10) (2023-10-10)
+
+
+### Bug Fixes
+
+* improve components ([f9664fc](https://git.lumeweb.com/LumeWeb/sdk/commit/f9664fc8498ec94e4a355f2e920bd7f706f59145))
+
+
+### Features
+
+* allow to customize the lume identity trigger ([099b2f2](https://git.lumeweb.com/LumeWeb/sdk/commit/099b2f2c649d47df83c060f3cd587ea2c8034060))
+
+# [0.1.0-develop.9](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.8...v0.1.0-develop.9) (2023-10-10)
+
+
+### Bug Fixes
+
+* properly adding the scope ([7b1dc37](https://git.lumeweb.com/LumeWeb/sdk/commit/7b1dc37e72b4330b0f3e6ab27454ea3cdb54e9ba))
+
+# [0.1.0-develop.8](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.7...v0.1.0-develop.8) (2023-10-10)
+
+
+### Bug Fixes
+
+* styles on lume identity ([7fc193c](https://git.lumeweb.com/LumeWeb/sdk/commit/7fc193ce7249898b5c83886f24e2ec114312bda1))
+
+# [0.1.0-develop.7](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.6...v0.1.0-develop.7) (2023-10-09)
+
+
+### Bug Fixes
+
+* translate seed phrase length into bits ([935675f](https://git.lumeweb.com/LumeWeb/sdk/commit/935675f7e8a33f87459d7fe817d260495948075b))
+
+# [0.1.0-develop.6](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.5...v0.1.0-develop.6) (2023-10-09)
+
+
+### Bug Fixes
+
+* lib working weirdly not anymore ([7f30d90](https://git.lumeweb.com/LumeWeb/sdk/commit/7f30d9091a4f07b5b0d692c3fdaeebd0001a29e5))
+* modal not showing ([4e5b8a5](https://git.lumeweb.com/LumeWeb/sdk/commit/4e5b8a5eab0f7fb6dd9f62b3304724a327024426))
+
+# [0.1.0-develop.5](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.4...v0.1.0-develop.5) (2023-10-09)
+
+# [0.1.0-develop.4](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.3...v0.1.0-develop.4) (2023-10-09)
+
+
+### Bug Fixes
+
+* update package.json entry ([18efdbe](https://git.lumeweb.com/LumeWeb/sdk/commit/18efdbe39dcb1126b798dd35217611cefcc605d0))
+
+# [0.1.0-develop.3](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.2...v0.1.0-develop.3) (2023-10-09)
+
+
+### Bug Fixes
+
+* remove private from package.json ([2ef8e09](https://git.lumeweb.com/LumeWeb/sdk/commit/2ef8e09346c81af4ce4b6971a11d6d0905a7de3f))
+
+# [0.1.0-develop.2](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.1...v0.1.0-develop.2) (2023-10-09)
+
+
+### Bug Fixes
+
+* update vite-plugin-scope-tailwind patch ([dcc1428](https://git.lumeweb.com/LumeWeb/sdk/commit/dcc1428743dd3be867166dd326bb48c086337034))
+
+# [0.1.0-develop.1](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.0.1...v0.1.0-develop.1) (2023-10-09)
+
+
+### Bug Fixes
+
+* add patch for vite-plugin-scope-tailwind ([cc03b05](https://git.lumeweb.com/LumeWeb/sdk/commit/cc03b056e358519be9ec771893b61b25b32eed87))
+* attributes needs to be changed ([0d00283](https://git.lumeweb.com/LumeWeb/sdk/commit/0d00283ba1dab7b3ae06bb665d9f550abbd329a4))
+* import useState ([baa4365](https://git.lumeweb.com/LumeWeb/sdk/commit/baa4365abb37a931f46dab957a748e54ac506faa))
+* lumelogobg ([ef85d92](https://git.lumeweb.com/LumeWeb/sdk/commit/ef85d921a6abd9d5788257af2d8aec52157d01e6))
+* set default syncState ([4982a3d](https://git.lumeweb.com/LumeWeb/sdk/commit/4982a3dd1a8ba932c3ab4f4427aadeba6295b22f))
+* types ([14c7f54](https://git.lumeweb.com/LumeWeb/sdk/commit/14c7f5401b338f1aacee19019d9e299bb5f87b1d))
+* update stories path ([5a7c0b0](https://git.lumeweb.com/LumeWeb/sdk/commit/5a7c0b01b062a4ace0a66c11436339f70f6a8963))
+* update stories path ([a049174](https://git.lumeweb.com/LumeWeb/sdk/commit/a04917449ef442ca20eb1cb257ab18188972c7ad))
+* update syncState and how status updates work and their types ([0551582](https://git.lumeweb.com/LumeWeb/sdk/commit/05515828877bddf435eaf44108793f156302b8c0))
+* use sync not progress ([1d1a025](https://git.lumeweb.com/LumeWeb/sdk/commit/1d1a02527b83d9d0892664755ec28b3ae13e3aba))
+
+
+### Features
+
+* add proper tailwind scoping and config! ([aba0268](https://git.lumeweb.com/LumeWeb/sdk/commit/aba02687dba803d53ecedb77155dca3945f53f1d))
+* building is now done! ([1fd163a](https://git.lumeweb.com/LumeWeb/sdk/commit/1fd163afc879fbf1d307247e6d87cda4e0255c55))

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 LumeWeb
+Copyright (c) 2023 Hammer Technologies LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

dist/lib.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lib.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

dist/lib.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lib.umd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

dist/manifest.json

@@ -1,11 +0,0 @@
-{
-  "src/main.ts": {
-    "file": "lib.umd.js",
-    "isEntry": true,
-    "src": "src/main.ts"
-  },
-  "style.css": {
-    "file": "style.css",
-    "src": "style.css"
-  }
-}

dist/package.json

@@ -1 +0,0 @@
-{"name":"@lume-sdk/components","version":"0.0.0","main":"./lib.umd.js","module":"./lib.es.js","types":"./src/main.d.ts","files":["./src","./style.css"],"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"}}

dist/src/components/SwitchableComponent.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-export declare const SwitchableComponentProvider: ({ children }: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export declare function useSwitchableComponent(initialValue?: SwitchableComponentType): SwitchableComponentContextType<unknown>;
-export declare const SwitchableComponent: ({ children, index }: React.PropsWithChildren<{
-    index: string;
-}>) => import("react/jsx-runtime").JSX.Element;
-type SwitchableComponentType<T extends {} = {}> = {
-    index: string;
-    render: (props: T | any) => ReturnType<React.FC>;
-};
-type SwitchableComponentContextType<T = unknown> = {
-    visibleComponent: SwitchableComponentType<T extends {} ? T : any>;
-    setVisibleComponent: React.Dispatch<React.SetStateAction<SwitchableComponentType<T extends {} ? T : any> | undefined>>;
-};
-export declare function makeSwitchable<T extends {}>(Component: React.FC<T>, index: string): {
-    render(props: T): import("react/jsx-runtime").JSX.Element;
-    index: string;
-};
-export {};

dist/src/components/lume/LumeDashboard/LumeDashboard.d.ts

@@ -1,2 +0,0 @@
-declare const LumeDashboard: () => import("react/jsx-runtime").JSX.Element;
-export default LumeDashboard;

dist/src/components/lume/LumeIdentity/LumeIdentity.d.ts

@@ -1 +0,0 @@
-export default function Wrapped(): import("react/jsx-runtime").JSX.Element;

dist/src/components/lume/LumeIdentity/LumeIdentityContext.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-export type Session = string;
-export declare const LumeIdentityContext: React.Context<{
-    session: Session | undefined;
-    setSession: React.Dispatch<React.SetStateAction<Session | undefined>>;
-} | undefined>;
-export declare function useLumeIndentity(): {
-    isSignedIn: boolean;
-    signIn: (key: string) => void;
-    signOut: () => void;
-};

dist/src/components/lume/LumeIdentity/components.d.ts

@@ -1,18 +0,0 @@
-export declare const SubmitButton: {
-    render(props: {}): import("react/jsx-runtime").JSX.Element;
-    index: string;
-};
-export declare const SeedPhraseInput: {
-    render(props: {}): import("react/jsx-runtime").JSX.Element;
-    index: string;
-};
-export declare const SetupAccountKey: {
-    render(props: {}): import("react/jsx-runtime").JSX.Element;
-    index: string;
-};
-export declare const SeedPhraseGeneration: {
-    render(props: {
-        phraseLength?: number | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    index: string;
-};

dist/src/components/lume/LumeProvider.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-type LumeSyncState = 'syncing' | 'done' | 'error';
-export type Chain = {
-    syncState: LumeSyncState;
-    name: string;
-    chainId: string;
-    active: boolean;
-    progress: number;
-    logs: string[];
-    type: 'blockchain' | 'content';
-    peerCount?: number;
-};
-type LumeObject = {
-    chains: Chain[];
-    activeResolver: 'local' | 'rpc';
-};
-declare const LumeProvider: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export default LumeProvider;
-export declare function useLume(): LumeObject;

dist/src/components/ui/button.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };

dist/src/components/ui/input.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export { Input };

dist/src/components/utils.d.ts

@@ -1,2 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;

dist/src/main.d.ts

@@ -1,3 +0,0 @@
-export * from './components/lume/LumeProvider';
-export * from './components/lume/LumeDashboard/LumeDashboard';
-export * from './components/lume/LumeIdentity/LumeIdentity';

lib/vite-plugin-scope-tailwind

@@ -1 +0,0 @@
-Subproject commit cec13df7edcb480dfb111de3c74887f1c3ffb7e2

package.json

@@ -1,62 +1,88 @@
 {
-  "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/package.json",
-  "name": "sdk",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "main": "./src/main.ts",
-  "types": "./src/main.ts",
-  "scripts": {
-    "dev": "vite",
-    "build-pkg": "tsc -p ./tsconfig.build.json && vite build",
-    "build": "zx ./scripts/build.mjs",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-slot": "^1.0.2",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "framer-motion": "^10.16.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-vite": "^7.4.6",
-    "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@types/uniqid": "^5.3.2",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.14",
-    "json": "^11.0.0",
-    "postcss": "^8.4.31",
-    "storybook": "^7.4.6",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "uniqid": "^5.4.0",
-    "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.6.0",
-    "vite-plugin-scope-tailwind": "^1.1.3",
-    "vite-plugin-svgr": "^4.1.0",
-    "zx": "^7.2.3"
-  }
+    "name": "@lumeweb/sdk",
+    "version": "0.1.0-develop.44",
+    "type": "module",
+    "main": "lib/index.js",
+    "types": "lib/src/index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "gitea@git.lumeweb.com:LumeWeb/sdk.git"
+    },
+    "scripts": {
+        "prepare": "presetter bootstrap",
+        "build": "run build",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "semantic-release": "semantic-release",
+        "postinstall": "patch-package"
+    },
+    "files": [
+        "lib"
+    ],
+    "dependencies": {
+        "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
+        "@lumeweb/libkernel": "0.1.0-develop.65",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@scure/bip39": "^1.2.1",
+        "camelcase": "^8.0.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.0.0",
+        "framer-motion": "^10.16.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7",
+        "vite-plugin-node-polyfills": "^0.15.0"
+    },
+    "devDependencies": {
+        "@lumeweb/node-library-preset": "*",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-icons": "^1.3.0",
+        "@storybook/addon-essentials": "^7.4.6",
+        "@storybook/addon-interactions": "^7.4.6",
+        "@storybook/addon-links": "^7.4.6",
+        "@storybook/addon-onboarding": "^1.0.8",
+        "@storybook/blocks": "^7.4.6",
+        "@storybook/react": "^7.4.6",
+        "@storybook/react-vite": "^7.4.6",
+        "@storybook/testing-library": "^0.2.2",
+        "@types/react": "^18.2.25",
+        "@types/react-dom": "^18.2.11",
+        "@types/uniqid": "^5.3.2",
+        "@typescript-eslint/eslint-plugin": "^6.7.4",
+        "@typescript-eslint/parser": "^6.7.4",
+        "@vitejs/plugin-react": "^4.1.0",
+        "autoprefixer": "^10.4.16",
+        "class-variance-authority": "^0.7.0",
+        "eslint": "^8.51.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.3",
+        "eslint-plugin-storybook": "^0.6.15",
+        "framer-motion": "^10.16.4",
+        "json": "^11.0.0",
+        "patch-package": "^8.0.0",
+        "postcss": "^8.4.31",
+        "presetter": "*",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "storybook": "^7.4.6",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss": "^3.3.3",
+        "tailwindcss-animate": "^1.0.7",
+        "typescript": "^5.2.2",
+        "uniqid": "^5.4.0",
+        "vite": "^4.4.11",
+        "vite-plugin-dts": "^3.6.0",
+        "vite-plugin-no-bundle": "^3.0.0",
+        "vite-plugin-node-polyfills": "^0.15.0",
+        "vite-plugin-optimizer": "^1.4.2",
+        "vite-plugin-scope-tailwind": "^1.1.3",
+        "vite-plugin-svgr": "^4.1.0"
+    },
+    "readme": "ERROR: No README data found!",
+    "publishConfig": {
+        "access": "public"
+    }
 }

patches/vite-plugin-scope-tailwind+1.1.3.patch

@@ -0,0 +1,156 @@
+diff --git a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
+index 0e337b0..a4d7cbe 100644
+--- a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
++++ b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
+@@ -1,2 +1,109 @@
+-"use strict";const p=require("path");function j(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function w(e){if(e.__esModule)return e;var r=e.default;if(typeof r=="function"){var t=function n(){return this instanceof n?Reflect.construct(r,arguments,this.constructor):r.apply(this,arguments)};t.prototype=r.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(e).forEach(function(n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}),t}function h(e){throw new Error('Could not dynamically require "'+e+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}var c={exports:{}};const v={},q=Object.freeze(Object.defineProperty({__proto__:null,default:v},Symbol.toStringTag,{value:"Module"})),b=w(q);var m=typeof process<"u"&&process.pid?process.pid.toString(36):"",y="";if(typeof __webpack_require__!="function"&&typeof h<"u"){var f="",d=b;if(d.networkInterfaces)var l=d.networkInterfaces();if(l){e:for(let e in l){const r=l[e],t=r.length;for(var i=0;i<t;i++)if(r[i]!==void 0&&r[i].mac&&r[i].mac!="00:00:00:00:00:00"){f=r[i].mac;break e}}y=f?parseInt(f.replace(/\:|\D+/gi,"")).toString(36):""}}c.exports=c.exports.default=function(e,r){return(e||"")+y+m+u().toString(36)+(r||"")};c.exports.process=function(e,r){return(e||"")+m+u().toString(36)+(r||"")};c.exports.time=function(e,r){return(e||"")+u().toString(36)+(r||"")};function u(){var e=Date.now(),r=u.last||e;return u.last=e>r?e:r+1}var x=c.exports;const P=j(x),O=()=>{try{return require(p.join(process.cwd(),"postcss.config.js"))}catch{}try{return require(p.join(process.cwd(),"postcss.config.cjs"))}catch{}try{return require(p.join(process.cwd(),"postcss.config.json"))}catch{}return{plugins:{tailwindcss:{},autoprefixer:{}}}},R=e=>Object.keys(e.plugins);function E(e,r){return r?(e=e.trim(),r instanceof RegExp?r.exec(e):Array.isArray(r)?r.some(t=>t instanceof RegExp?t.exec(e):e===t):e===r):!1}const S=({prefix:e,ignore:r})=>({postcssPlugin:"prefix-tailwind-classes",Root(t){t.walkRules(n=>{if(!n.selectors)return!1;n.selectors=n.selectors.map(o=>{if(o.indexOf(".")!==0)return o;var a=o.split(".");return a.map(s=>E(s,r)||s.trim().length===0?s:e+s).join(".")})})}}),$=e=>r=>{const t=/className/g;return r.match(t)?r.replace(/className: "/g,`className: "${e} `):r},k=e=>r=>{const t=/class/g;return r.match(t)?r.replace(/class: "/g,`class: "${e} `):r},g=P("d"),D=({react:e=!1,ignore:r=[]}={})=>({name:"vite-plugin-scope-tailwind",config:t=>{var a,s;const n=((s=(a=t.css)==null?void 0:a.postcss)==null?void 0:s.plugins)??[],o=O();return{css:{postcss:{plugins:[...n,...R(o).map(_=>require(p.join(process.cwd(),"node_modules",_))),S({prefix:`${g}.`,ignore:r})]}}}},transform:e?$(g):k(g)});module.exports=D;
++'use strict'
++const p = require('path')
++
++function j (e) {return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, 'default') ? e.default : e}
++
++function w (e) {
++    if (e.__esModule) return e
++    var r = e.default
++    if (typeof r == 'function') {
++        var t = function n () {return this instanceof n ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments)}
++        t.prototype = r.prototype
++    } else t = {}
++    return Object.defineProperty(t, '__esModule', { value: !0 }), Object.keys(e).forEach(function (n) {
++        var o = Object.getOwnPropertyDescriptor(e, n)
++        Object.defineProperty(t, n, o.get ? o : { enumerable: !0, get: function () {return e[n]} })
++    }), t
++}
++
++function h (e) {throw new Error('Could not dynamically require "' + e + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}
++
++var c = { exports: {} }
++const v = {},
++    q = Object.freeze(Object.defineProperty({ __proto__: null, default: v }, Symbol.toStringTag, { value: 'Module' })),
++    b = w(q)
++var m = typeof process < 'u' && process.pid ? process.pid.toString(36) : '', y = ''
++if (typeof __webpack_require__ != 'function' && typeof h < 'u') {
++    var f = '', d = b
++    if (d.networkInterfaces) var l = d.networkInterfaces()
++    if (l) {
++        e:for (let e in l) {
++            const r = l[e], t = r.length
++            for (var i = 0; i < t; i++) if (r[i] !== void 0 && r[i].mac && r[i].mac != '00:00:00:00:00:00') {
++                f = r[i].mac
++                break e
++            }
++        }
++        y = f ? parseInt(f.replace(/\:|\D+/gi, '')).toString(36) : ''
++    }
++}
++c.exports = c.exports.default = function (e, r) {return (e || '') + y + m + u().toString(36) + (r || '')}
++c.exports.process = function (e, r) {return (e || '') + m + u().toString(36) + (r || '')}
++c.exports.time = function (e, r) {return (e || '') + u().toString(36) + (r || '')}
++
++function u () {
++    var e = Date.now(), r = u.last || e
++    return u.last = e > r ? e : r + 1
++}
++
++var x = c.exports
++const P = j(x), O = () => {
++    try {return require(p.join(process.cwd(), 'postcss.config.js'))} catch {}
++    try {return require(p.join(process.cwd(), 'postcss.config.cjs'))} catch {}
++    try {return require(p.join(process.cwd(), 'postcss.config.json'))} catch {}
++    return { plugins: { tailwindcss: {}, autoprefixer: {} } }
++}, R = e => Object.keys(e.plugins)
++
++function E (e, r) {return r ? (e = e.trim(), r instanceof RegExp ? r.exec(e) : Array.isArray(r) ? r.some(t => t instanceof RegExp ? t.exec(e) : e === t) : e === r) : !1}
++
++const S = ({ prefix: e, ignore: r }) => ({
++    postcssPlugin: 'prefix-tailwind-classes',
++    Root (t) {
++        t.walkRules(n => {
++            if (!n.selectors) return !1
++            n.selectors = n.selectors.map(o => {
++                if (o.indexOf('.') !== 0) return o
++                var a = o.split('.')
++                return a.map(s => E(s, r) || s.trim().length === 0 ? s : e + s).join('.')
++            })
++        })
++    }
++}), $ = (e,modifiers) => r => {
++    let modifiedCode = r;
++    const classNameRegex = /className/g;
++    const foundClassName = modifiedCode.match(classNameRegex);
++    if (foundClassName) {
++        modifiedCode = modifiedCode.replace(/className: "/g, `className: "${e} `);
++    }
++    if (modifiers != null) {
++        modifiers.forEach(modifier => {
++            const regex = new RegExp(`className: ${modifier}\\(([^)]*)\\)`, 'g');
++            const replacement = `className: "${e} " + ${modifier}($1)`;
++            const found = modifiedCode.match(regex);
++            if (found) {
++                modifiedCode = modifiedCode.replace(regex, replacement);
++            }
++        });
++    }
++    return modifiedCode;
++}, k = e => r => {
++    const t = /class/g
++    return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r
++}, g = P('d'), D = ({ react: e = !1, ignore: r = [], prefix, classNameTransformers = [] } = {}) => ({
++    name: 'vite-plugin-scope-tailwind', config: t => {
++        var a, s
++        const n = ((s = (a = t.css) == null ? void 0 : a.postcss) == null ? void 0 : s.plugins) ?? [], o = O()
++        return {
++            css: {
++                postcss: {
++                    plugins: [...n, ...R(o).map(_ => require(p.join(process.cwd(), 'node_modules', _))), S({
++                        prefix: `${prefix ? prefix : g}.`,
++                        ignore: r
++                    })]
++                }
++            }
++        }
++    }, transform: e ? $(prefix ? prefix : g, classNameTransformers) : k(prefix ? prefix : g)
++})
++module.exports = D
+ //# sourceMappingURL=index.cjs.map
+diff --git a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
+index 9594d38..c86b6da 100644
+--- a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
++++ b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
+@@ -111,6 +111,8 @@ const S = ({
+   return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r;
+ }, g = P("d"), M = ({
+   react: e = !1,
++  classNameTransformers = [],
++  prefix,
+   ignore: r = []
+ } = {}) => ({
+   name: "vite-plugin-scope-tailwind",
+@@ -125,13 +127,13 @@ const S = ({
+             ...R(o).map(
+               (_) => require(p.join(process.cwd(), "node_modules", _))
+             ),
+-            S({ prefix: `${g}.`, ignore: r })
++            S({ prefix: `${prefix ? prefix : g}.`, ignore: r })
+           ]
+         }
+       }
+     };
+   },
+-  transform: e ? $(g) : k(g)
++  transform: e ? $(prefix ? prefix : g, classNameTransformers) : k(prefix ? prefix : g )
+ });
+ export {
+   M as default
+diff --git a/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts b/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
+index 2b63f48..9396191 100644
+--- a/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
++++ b/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
+@@ -2,5 +2,7 @@ import { Plugin } from "vite";
+ declare const plugin: ({ react, ignore, }?: {
+     react?: boolean | undefined;
+     ignore?: RegExp | RegExp[] | undefined;
++    classNameTransformers?: string[],
++    prefix?: string
+ }) => Plugin;
+ export default plugin;

scoped-tailwind-prefix.ts

@@ -0,0 +1 @@
+export const TW_PREFIX = 'lumesdk'

src/components/AuthProvider.tsx

@@ -0,0 +1,38 @@
+import { createContext, useState, useContext, ReactNode } from "react";
+
+// AuthContextType
+export interface AuthContextType {
+  isLoggedIn: boolean;
+  setIsLoggedIn: (value: boolean) => void;
+}
+
+// AuthContext
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+// AuthProvider
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// useAuth hook
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+
+  return context;
+}
+
+export default AuthProvider;

src/components/LumeStatusProvider.tsx

@@ -0,0 +1,45 @@
+import { createContext, useState, useContext, ReactNode } from "react";
+
+// LumeStatusContextType
+export interface LumeStatusContextType {
+  inited: boolean;
+  setInited: (value: boolean) => void;
+  ready: boolean;
+  setReady: (value: boolean) => void;
+}
+
+// LumeStatusContext
+export const LumeStatusContext = createContext<
+  LumeStatusContextType | undefined
+>(undefined);
+
+// LumeStatusProvider
+interface LumeStatusProviderProps {
+  children: ReactNode;
+}
+
+export const LumeStatusProvider: React.FC<LumeStatusProviderProps> = ({
+  children,
+}) => {
+  const [inited, setInited] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  return (
+    <LumeStatusContext.Provider value={{ inited, setInited, ready, setReady }}>
+      {children}
+    </LumeStatusContext.Provider>
+  );
+};
+
+// useLumeStatus hook
+export function useLumeStatus() {
+  const context = useContext(LumeStatusContext);
+
+  if (!context) {
+    throw new Error("useLumeStatus must be used within a LumeStatusProvider");
+  }
+
+  return context;
+}
+
+export default LumeStatusProvider;

src/components/NetworksProvider.tsx

@@ -0,0 +1,142 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createClient as createNetworkRegistryClient } from "@lumeweb/kernel-network-registry-client";
+import { createNetworkClient } from "@lumeweb/libkernel/module";
+
+type SyncState = "done" | "syncing" | "error";
+
+export interface Network extends NetworkStatus {
+  name: string;
+  id: string;
+  type: string;
+  syncState: SyncState;
+}
+
+interface NetworkStatus {
+  sync: number;
+  peers: number;
+  ready: boolean;
+  error?: string;
+}
+
+export interface NetworksContextType {
+  networks: Network[];
+  setNetworks: React.Dispatch<React.SetStateAction<Network[]>>;
+}
+
+const networkRegistry = createNetworkRegistryClient();
+
+// Networks Context
+const NetworksContext = createContext<NetworksContextType | undefined>(
+  undefined,
+);
+
+const NetworksProvider = ({ children }) => {
+  const [networks, setNetworks] = useState<Network[]>([]);
+  const statusUnsubs = useRef(new Map());
+  const isMounted = useRef(true); // Use a ref to track mounting
+
+  const handleStatusUpdate = useCallback((id, newNetwork) => {
+    setNetworks((prevNetworks) => {
+      return prevNetworks.map((network) =>
+        network.id === id ? { ...network, ...newNetwork } : network,
+      );
+    });
+  }, []);
+
+  const fetchAndUpdateNetworks = useCallback(async () => {
+    const unsub = () => {
+      statusUnsubs.current.forEach((unsub) => unsub());
+      statusUnsubs.current.clear();
+    };
+
+    try {
+      const types = await networkRegistry.getTypes();
+      const newNetworksMap = new Map();
+      const newStatusUnsubs = new Map();
+
+      for (const type of types) {
+        if (!isMounted.current) {
+          unsub();
+          return;
+        }
+        const list = await networkRegistry.getNetworksByType(type);
+        for (const module of list) {
+          const client = createNetworkClient(module);
+          const name = await client.name();
+
+          const initialNetworkStatus = {
+            peers: 0,
+            ready: false,
+            sync: 0,
+            type,
+            name,
+            id: module,
+            syncState: "syncing",
+          };
+
+          const statusUnsub = client.status((newStatus) => {
+            const syncState = newStatus.ready
+              ? "done"
+              : newStatus.error
+              ? "error"
+              : "syncing";
+            handleStatusUpdate(module, { ...newStatus, syncState });
+          });
+
+          newStatusUnsubs.set(module, statusUnsub);
+          newNetworksMap.set(module, initialNetworkStatus);
+        }
+      }
+
+      statusUnsubs.current.forEach((unsub) => unsub());
+      statusUnsubs.current = newStatusUnsubs;
+
+      if (isMounted.current) {
+        setNetworks(Array.from(newNetworksMap.values()));
+      } else {
+        unsub();
+      }
+    } catch (error) {
+      if (isMounted.current) {
+        console.error("Error fetching and updating networks:", error);
+      }
+    }
+  }, [handleStatusUpdate]);
+
+  useEffect(() => {
+    fetchAndUpdateNetworks();
+
+    const subDone = networkRegistry.subscribeToUpdates(() =>
+      fetchAndUpdateNetworks(),
+    );
+
+    return () => {
+      isMounted.current = false; // Track component unmounting
+      subDone?.();
+      statusUnsubs.current.forEach((unsub) => unsub());
+    };
+  }, [fetchAndUpdateNetworks]);
+
+  return (
+    <NetworksContext.Provider value={{ networks, setNetworks }}>
+      {children}
+    </NetworksContext.Provider>
+  );
+};
+
+export function useNetworks() {
+  const context = useContext(NetworksContext);
+  if (!context) {
+    throw new Error("useNetworks must be used within a NetworksProvider");
+  }
+  return context;
+}
+
+export default NetworksProvider;

src/components/SwitchableComponent.tsx

@@ -1,23 +1,34 @@
 import { Variant, AnimatePresence, m } from "framer-motion";
 import React from "react";
 
-const SwitchableComponentContext = React.createContext<SwitchableComponentContextType | undefined>(undefined);
+const SwitchableComponentContext = React.createContext<
+  SwitchableComponentContextType | undefined
+>(undefined);
 
-export const SwitchableComponentProvider = ({ children }: React.PropsWithChildren) => {
-  const [visibleComponent, setVisibleComponent] = React.useState<SwitchableComponentType>();
+export const SwitchableComponentProvider = ({
+  children,
+}: React.PropsWithChildren) => {
+  const [visibleComponent, setVisibleComponent] =
+    React.useState<SwitchableComponentType>();
 
-  return <SwitchableComponentContext.Provider
-    value={{ visibleComponent: visibleComponent ?? DEFAULT_COMPONENT, setVisibleComponent }}
-  >
-    {children}
-  </SwitchableComponentContext.Provider>
-}
+  return (
+    <SwitchableComponentContext.Provider
+      value={{
+        visibleComponent: visibleComponent ?? DEFAULT_COMPONENT,
+        setVisibleComponent,
+      }}>
+      {children}
+    </SwitchableComponentContext.Provider>
+  );
+};
 
 export function useSwitchableComponent(initialValue?: SwitchableComponentType) {
   const contextValue = React.useContext(SwitchableComponentContext);
 
   if (contextValue === undefined) {
-    throw new Error('useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a <SwitchableComponentProvider>.');
+    throw new Error(
+      "useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a <SwitchableComponentProvider>.",
+    );
   }
   React.useEffect(() => {
     // Set the initial value if it's provided
@@ -30,22 +41,25 @@ export function useSwitchableComponent(initialValue?: SwitchableComponentType) {
 }
 
 const variants: Record<string, Variant> = {
-  hidden: { y: 50, opacity: 0, position: 'absolute' },
+  hidden: { y: 50, opacity: 0, position: "absolute" },
   show: {
     y: 0,
     x: 0,
     opacity: 1,
-    position: 'relative',
+    position: "relative",
     transition: {
       type: "tween",
-      ease: 'easeInOut'
+      ease: "easeInOut",
     },
   },
-  exit: { y: -50, opacity: 0, position: 'absolute' }
+  exit: { y: -50, opacity: 0, position: "absolute" },
 };
 
-export const SwitchableComponent = ({ children, index }: React.PropsWithChildren<{ index: string }>) => {
-  const [width, setWidth] = React.useState<number>()
+export const SwitchableComponent = ({
+  children,
+  index,
+}: React.PropsWithChildren<{ index: string }>) => {
+  const [width, setWidth] = React.useState<number>();
   return (
     <AnimatePresence>
       <m.div
@@ -55,9 +69,10 @@ export const SwitchableComponent = ({ children, index }: React.PropsWithChildren
         exit="exit"
         variants={variants}
         className="h-full w-full"
-        style={{ maxWidth: width ?? 'auto' }}
-        onTransitionEnd={(e) => setWidth(e.currentTarget.getBoundingClientRect().width!)}
-      >
+        style={{ maxWidth: width ?? "auto" }}
+        onTransitionEnd={(e) =>
+          setWidth(e.currentTarget.getBoundingClientRect().width!)
+        }>
         {children}
       </m.div>
     </AnimatePresence>
@@ -65,21 +80,33 @@ export const SwitchableComponent = ({ children, index }: React.PropsWithChildren
 };
 
 type SwitchableComponentType<T extends {} = {}> = {
-  index: string,
-  render: (props: T | any) => ReturnType<React.FC>
-}
+  index: string;
+  render: (props: T | any) => ReturnType<React.FC>;
+};
 
 type SwitchableComponentContextType<T = unknown> = {
-  visibleComponent: SwitchableComponentType<T extends {} ? T : any>,
-  setVisibleComponent: React.Dispatch<React.SetStateAction<SwitchableComponentType<T extends {} ? T : any> | undefined>>
-}
+  visibleComponent: SwitchableComponentType<T extends {} ? T : any>;
+  setVisibleComponent: React.Dispatch<
+    React.SetStateAction<
+      SwitchableComponentType<T extends {} ? T : any> | undefined
+    >
+  >;
+};
 
-const DEFAULT_COMPONENT = { render: () => undefined, index: Symbol('DEFAULT_COMPONENT').toString() }
+const DEFAULT_COMPONENT = {
+  render: () => undefined,
+  index: Symbol("DEFAULT_COMPONENT").toString(),
+};
 
 // Factory function
-export function makeSwitchable<T extends {}>(Component: React.FC<T>, index: string) {
+export function makeSwitchable<T extends {}>(
+  Component: React.FC<T>,
+  index: string,
+) {
   return {
-    render(props: T) { return <Component {...props} /> },
-    index: index || Symbol(Component.name).toString()
+    render(props: T) {
+      return <Component {...props} />;
+    },
+    index: index || Symbol(Component.name).toString(),
   };
-};
+}

src/components/lume/LumeDashboard/LumeDashboard.stories.tsx

@@ -1,17 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import LumeDashboard from './LumeDashboard';
-import LumeProvider from '../LumeProvider';
-
-export default {
-  title: 'LumeDashboard',
-  component: LumeDashboard,
-} as Meta<typeof LumeDashboard>;
-
-const Template: StoryFn<typeof LumeDashboard> = (args) => <LumeProvider>
-  <LumeDashboard {...args} />
-</LumeProvider>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  // Add initial props here
-};

src/components/lume/LumeDashboard/LumeDashboard.tsx

@@ -1,138 +1,172 @@
-import * as Dialog from "@radix-ui/react-dialog"
-import { Chain, useLume } from "../LumeProvider"
-import Logo from "../../../assets/lume-logo.png"
-import { cva } from "class-variance-authority"
-import { cn } from "../../utils"
+import * as Dialog from "@radix-ui/react-dialog";
+import Logo from "../../../assets/lume-logo.png";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils";
+import React from "react";
+import camelCase from "camelcase";
+import { useNetworks, type Network } from "../../NetworksProvider";
+import { TW_PREFIX } from "../../../../scoped-tailwind-prefix";
 
-
-const SYNCSTATE_TO_TEXT: Record<Chain["syncState"], string> = {
+const SYNCSTATE_TO_TEXT: Record<Network["syncState"], string> = {
   done: "Synced",
   error: "Issue",
-  syncing: "Syncing"
-}
+  syncing: "Syncing",
+};
 
-const LumeDashboard = () => {
-  const { chains } = useLume()
+export const LumeDashboardTrigger = Dialog.Trigger;
+LumeDashboardTrigger.displayName = "LumeDashboardTrigger";
 
-  const contentChains = chains.filter((c) => c.type === "content")
-  const blockchainChains = chains.filter((c) => c.type === "blockchain")
+const LumeDashboard = (props: any) => {
+  const { children }: { children: React.PropsWithChildren } = props;
+  const { networks } = useNetworks();
+
+  const networkTypes = networks.map((network) => network.type);
+  const uniqueNetworkTypes = Array.from(new Set(networkTypes));
+
+  const DefaultTrigger = (props: any) => (
+    <LumeDashboardTrigger asChild {...props}>
+      <button
+        className={cn(
+          "bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md",
+          {
+            "disabled:pointer-events-none disabled:opacity-50": props.disabled,
+          },
+        )}
+        {...props}>
+        Open Dashboard
+      </button>
+    </LumeDashboardTrigger>
+  );
+  const GivenTrigger = React.Children.toArray(
+    children?.children || (children as any) || [],
+  )
+    .filter((c) => {
+      if (typeof c === "object") {
+        //@ts-expect-error -- I dont know what the type of this should be, i just know that this works
+        return c.type?.displayName === "LumeDashboardTrigger";
+      }
+
+      return false;
+    })
+    .at(0);
+  const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
 
   return (
     <Dialog.Root>
-      <Dialog.Trigger>Open</Dialog.Trigger>
+      <Trigger {...props} />
       <Dialog.Portal>
         <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
         <Dialog.Content className="fixed p-5 z-50 right-0 bottom-0 top-0 w-[300px] bg-neutral-950 text-white border-black border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500">
           <div className="w-[calc(100%+38px)] border-b pb-3 -mx-5 px-5 border-neutral-900">
             <img src={Logo} className="w-24" />
           </div>
-          <div className="mt-4 mb-8">
-            <h2 className="text-xl mb-4"> Content </h2>
-            <div className="grid grid-cols-2">
-              {contentChains.map((chain, index) => (
-                <ChainIndicator
-                  key={`Content_ChainIndicator_${index}`}
-                  chain={chain}
-                />
-              ))}
+          {uniqueNetworkTypes.map((type, index) => (
+            <div className="mt-4 mb-8" key={`NetworkTypeSection_${index}`}>
+              <h2 className="text-xl mb-4">
+                {camelCase(type, { pascalCase: true })}
+              </h2>
+              <div className="grid grid-cols-2">
+                {networks
+                  .filter((network) => network.type === type)
+                  .map((network, networkIndex) => (
+                    <NetworkIndicator
+                      key={`${type}_ChainIndicator_${networkIndex}`}
+                      network={network}
+                    />
+                  ))}
+              </div>
             </div>
-          </div>
-
-          <div className="mt-4 mb-8">
-            <h2 className="text-xl mb-4"> Blockchain </h2>
-            <div className="grid grid-cols-2">
-              {blockchainChains.map((chain, index) => (
-                <ChainIndicator
-                  key={`Blockchain_ChainIndicator_${index}`}
-                  chain={chain}
-                />
-              ))}
-            </div>
-          </div>
+          ))}
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
-  )
-}
+  );
+};
 
 const chainIndicatorVariant = cva("chainIndicatorVariant", {
   variants: {
     syncState: {
       done: "text-primary",
       error: "text-red-500",
-      syncing: "text-orange-500"
-    }
-  }
+      syncing: "text-orange-500",
+    },
+  },
 });
-const ChainIndicator = ({ chain }: { chain: Chain }) => {
+
+const NetworkIndicator = ({ network }: { network: Network }) => {
   return (
-    <div key={chain.chainId} className="flex flex-row gap-x-2 items-center ">
-      <CircularProgress chain={chain} />
+    <div key={network.id} className="flex flex-row gap-x-2 items-center ">
+      <CircularProgress chain={network} />
       <div className="flex flex-col">
-        <span>{chain.name}</span>
+        <span>{network.name}</span>
         <span
-          className={cn(['text-[12px] -mt-1', chainIndicatorVariant({syncState: chain.syncState})])}
-        >
-          {SYNCSTATE_TO_TEXT[chain.syncState]}
+          className={cn([
+            "text-[12px] -mt-1",
+            chainIndicatorVariant({ syncState: network.syncState }),
+          ])}>
+          {SYNCSTATE_TO_TEXT[network.syncState]}
         </span>
       </div>
     </div>
-  )
-}
+  );
+};
 
 const CircularProgress = ({
   chain,
-  className
+  className,
 }: {
-  chain: Chain
-  className?: string
+  chain: Network;
+  className?: string;
 }) => {
-  const progressOffset = ((100 - chain.progress) / 100) * 282.74 // These math are not mathing
-  const textOffset = (chain.progress / 100) * (30 - 44) + 44
+  const size = 70;
+  const progressWidth = size * 0.03;  // based on size
+  const circleWidth = size * 0.03;  // based on size
+  const radius = size / 2 - 10;
+  const circumference = 2 * radius * Math.PI;
+  const offset = circumference * ((100 - chain.sync) / 100);
+  const fontSize = size * 0.2;  // based on size
 
   return (
     <svg
-      className={cn([className, chainIndicatorVariant({syncState: chain.syncState})])}
-      width="36"
-      height="36"
-      viewBox="0 0 100 100"
+      className={cn([
+        className,
+        chainIndicatorVariant({ syncState: chain.syncState }),
+      ])}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
-      style={{ transform: "rotate(-90deg)" }}
-    >
+      style={{ transform: "rotate(-90deg)" }}>
       <circle
-        r="45"
-        cx="50"
-        cy="50"
+        r={size / 2 - 10}
+        cx={size / 2}
+        cy={size / 2}
         fill="transparent"
         stroke="#e0e0e0"
-        stroke-width="4px"
-        stroke-dasharray="282.74px"
-        stroke-dashoffset="0"
-      ></circle>
+        strokeWidth={`${circleWidth}px`}
+        strokeDasharray={`${circumference}px`}></circle>
       <circle
-        r="45"
-        cx="50"
-        cy="50"
+        r={size / 2 - 10}
+        cx={size / 2}
+        cy={size / 2}
         stroke="currentColor"
-        stroke-width="4px"
-        stroke-linecap="round"
-        stroke-dashoffset={`${progressOffset}px`}
+        strokeWidth={`${progressWidth}px`}
+        strokeLinecap="round"
+        strokeDashoffset={`${offset}px`}
         fill="transparent"
-        stroke-dasharray="282.74px"
-      ></circle>
+        strokeDasharray={`${circumference}px`}></circle>
       <text
-        x={textOffset}
-        y="57.5px"
+        x="27px"
+        y="39px"
         fill="currentColor"
-        font-size="26px"
-        font-weight="normal"
-        style={{ transform: "rotate(90deg) translate(0px, -98px)" }}
-      >
-        {chain.progress}
+        fontSize={`${fontSize}px`}
+        fontWeight="normal"
+        style={{ transform: "rotate(90deg) translate(0px, -66px)" }}>
+        {chain.sync}
       </text>
     </svg>
-  )
-}
+  );
+};
 
-export default LumeDashboard
+export default LumeDashboard;

src/components/lume/LumeIdentity/LumeIdentity.stories.tsx

@@ -1,14 +0,0 @@
-import { StoryFn, Meta } from '@storybook/react';
-import LumeIdentity from './LumeIdentity';
-
-export default {
-  title: 'LumeIdentity',
-  component: LumeIdentity,
-} as Meta<typeof LumeIdentity>;
-
-const Template: StoryFn<typeof LumeIdentity> = (args) => <LumeIdentity {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  // Add initial props here
-};

src/components/lume/LumeIdentity/LumeIdentity.tsx

@@ -1,81 +1,150 @@
-import React from 'react';
-import { Button } from '../../../components/ui/button';
-import { SwitchableComponent, SwitchableComponentProvider, useSwitchableComponent } from '../../../components/SwitchableComponent';
+import React, { useState, type FC, useRef, useEffect } from "react";
+import { Button } from "../../ui/button";
+import {
+  SwitchableComponent,
+  SwitchableComponentProvider,
+  useSwitchableComponent,
+} from "../../SwitchableComponent";
 import * as ComponentList from "./components";
-import { LumeIdentityContext, Session } from './LumeIdentityContext';
-import { LazyMotion, domAnimation } from 'framer-motion';
-import * as Dialog from '@radix-ui/react-dialog';
-import LumeLogoBg from './LumeLogoBg';
+import { LazyMotion, domAnimation } from "framer-motion";
+import * as Dialog from "@radix-ui/react-dialog";
+import LumeLogoBg from "./LumeLogoBg";
+import { LumeIdentityContext } from "./LumeIdentityContext";
 
-const LumeIdentity: React.FC = () => {
-  const { visibleComponent, setVisibleComponent } = useSwitchableComponent(ComponentList.SubmitButton)
+const LumeIdentity: FC = () => {
+  const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
+    ComponentList.SubmitButton,
+  );
 
-  const isSubmitButtonInView = [ComponentList.SubmitButton.index].includes(visibleComponent.index)
-  const isLoginWithAccountKey = [ComponentList.SeedPhraseInput.index].includes(visibleComponent.index)
-  const isCreatingAccount = [ComponentList.SetupAccountKey.index].includes(visibleComponent.index)
-  const isShowingSeedPhrase = [ComponentList.SeedPhraseGeneration.index].includes(visibleComponent.index)
-  const isFinalStep = [ComponentList.SeedPhraseGeneration.index].includes(visibleComponent.index)
-  const shouldShowBackButton = isCreatingAccount
+  const isSubmitButtonInView = [ComponentList.SubmitButton.index].includes(
+    visibleComponent.index,
+  );
+  const isLoginWithAccountKey = [ComponentList.SeedPhraseInput.index].includes(
+    visibleComponent.index,
+  );
+  const isCreatingAccount = [ComponentList.SetupAccountKey.index].includes(
+    visibleComponent.index,
+  );
+  const isShowingSeedPhrase = [
+    ComponentList.SeedPhraseGeneration.index,
+  ].includes(visibleComponent.index);
+  const isFinalStep = [ComponentList.SeedPhraseGeneration.index].includes(
+    visibleComponent.index,
+  );
+  const shouldShowBackButton = isCreatingAccount;
 
-  const coloredOrLine = isSubmitButtonInView ? 'text-primary' : 'text-border'
+  const coloredOrLine = isSubmitButtonInView ? "text-primary" : "text-border";
 
-
-  return <div className="relative w-96 max-w-full inline-flex flex-col items-center justify-center gap-2.5 bg-zinc-950 px-8 py-11 transition-[height] duration-100 [&>*]:transition-all [&>*]:duration-100 overflow-hidden">
-    <div className="absolute left-[168px] top-[-8px] h-64 w-[280px] overflow-hidden">
-      <LumeLogoBg />
-    </div>
-    <div className="w-full z-10 flex flex-col items-center justify-center gap-10">
-      <div className="flex flex-col items-start justify-start gap-10">
-        <h2 className="w-full text-5xl font-normal leading-14 text-white">
-          {isSubmitButtonInView || isLoginWithAccountKey ? 'Sign in with Lume' : null}
-          {isCreatingAccount && !isShowingSeedPhrase ? 'Set up your account key' : null}
-          {isShowingSeedPhrase ? "Here's your account key" : null}
-        </h2>
+  return (
+    <div className="relative w-96 max-w-full inline-flex flex-col items-center justify-center gap-2.5 bg-zinc-950 px-8 py-11 transition-[height] duration-100 [&>*]:transition-all [&>*]:duration-100 overflow-hidden">
+      <div className="absolute left-[168px] top-[-8px] h-64 w-[280px] overflow-hidden">
+        <LumeLogoBg />
       </div>
-      <div className="flex flex-col items-start justify-start gap-2.5">
-        <LazyMotion features={domAnimation}>
-          <SwitchableComponent index={visibleComponent.index}>
-            <visibleComponent.render />
-          </SwitchableComponent>
-        </LazyMotion>
-        {!isFinalStep ? <>
-          <div className={`relative h-7 w-full overflow-hidden ${coloredOrLine}`}>
-            <svg width="409" height="28" className="max-w-full -left-1/2" viewBox="0 0 409 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fillRule="evenodd" clipRule="evenodd" d="M183 13H0V14H183V13ZM224 14H409V13H224V14Z" fill="currentColor" />
-              <path d="M199.75 19.0781C198.359 19.0781 197.299 18.6562 196.57 17.8125C195.841 16.9688 195.477 15.7344 195.477 14.1094C195.477 12.4896 195.839 11.2656 196.562 10.4375C197.292 9.60417 198.354 9.1875 199.75 9.1875C201.151 9.1875 202.216 9.60417 202.945 10.4375C203.674 11.2656 204.039 12.4896 204.039 14.1094C204.039 15.7344 203.674 16.9688 202.945 17.8125C202.216 18.6562 201.151 19.0781 199.75 19.0781ZM199.75 18.0234C200.729 18.0234 201.479 17.6901 202 17.0234C202.521 16.3516 202.781 15.3802 202.781 14.1094C202.781 12.8385 202.521 11.8776 202 11.2266C201.484 10.5703 200.734 10.2422 199.75 10.2422C198.771 10.2422 198.023 10.5703 197.508 11.2266C196.992 11.8776 196.734 12.8385 196.734 14.1094C196.734 15.3854 196.992 16.3568 197.508 17.0234C198.023 17.6901 198.771 18.0234 199.75 18.0234ZM206.742 19.0234C206.367 19.0234 206.18 18.9219 206.18 18.7188V9.69531C206.18 9.54948 206.214 9.44531 206.281 9.38281C206.349 9.3151 206.456 9.28125 206.602 9.28125H208.938C210.047 9.28125 210.88 9.47656 211.438 9.86719C212 10.2578 212.281 10.8802 212.281 11.7344C212.281 12.3125 212.141 12.7995 211.859 13.1953C211.583 13.5859 211.193 13.8802 210.688 14.0781V14.1328C210.958 14.2266 211.18 14.4089 211.352 14.6797C211.529 14.9453 211.724 15.3411 211.938 15.8672L213.023 18.6094C213.049 18.7031 213.062 18.7682 213.062 18.8047C213.062 18.9505 212.867 19.0234 212.477 19.0234H212.336C212.195 19.0234 212.073 19.0052 211.969 18.9688C211.87 18.9271 211.807 18.8724 211.781 18.8047L210.727 16.0781C210.591 15.724 210.432 15.4479 210.25 15.25C210.068 15.0521 209.852 14.9141 209.602 14.8359C209.352 14.7578 209.036 14.7188 208.656 14.7188H207.406V18.7188C207.406 18.9219 207.221 19.0234 206.852 19.0234H206.742ZM209.234 13.6641C209.562 13.6641 209.862 13.5859 210.133 13.4297C210.409 13.2734 210.625 13.0651 210.781 12.8047C210.943 12.5391 211.023 12.2578 211.023 11.9609C211.023 11.4141 210.857 11.0078 210.523 10.7422C210.19 10.4714 209.729 10.3359 209.141 10.3359H207.406V13.6641H209.234Z" fill="currentColor" />
-            </svg>
-          </div>
-          <Button className="h-12 w-full" variant={isSubmitButtonInView ? undefined : 'outline'} onClick={() => setVisibleComponent(shouldShowBackButton ? ComponentList.SubmitButton : ComponentList.SetupAccountKey)}>
-            <span className="text-center text-lg font-normal leading-normal">{shouldShowBackButton ? 'Go Back' : 'Create an Account'}</span>
-          </Button>
-        </> : null}
+      <div className="w-full z-10 flex flex-col items-center justify-center gap-10">
+        <div className="flex flex-col items-start justify-start gap-10">
+          <h2 className="w-full text-5xl font-normal leading-14 text-white">
+            {isSubmitButtonInView || isLoginWithAccountKey
+              ? "Sign in with Lume"
+              : null}
+            {isCreatingAccount && !isShowingSeedPhrase
+              ? "Set up your account key"
+              : null}
+            {isShowingSeedPhrase ? "Here's your account key" : null}
+          </h2>
+        </div>
+        <div className="flex flex-col items-start justify-start gap-2.5">
+          <LazyMotion features={domAnimation}>
+            <SwitchableComponent index={visibleComponent.index}>
+              <visibleComponent.render />
+            </SwitchableComponent>
+          </LazyMotion>
+          {!isFinalStep ? (
+            <>
+              <div
+                className={`relative h-7 w-full overflow-hidden ${coloredOrLine}`}>
+                <svg
+                  width="409"
+                  height="28"
+                  className="max-w-full -left-1/2"
+                  viewBox="0 0 409 28"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M183 13H0V14H183V13ZM224 14H409V13H224V14Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M199.75 19.0781C198.359 19.0781 197.299 18.6562 196.57 17.8125C195.841 16.9688 195.477 15.7344 195.477 14.1094C195.477 12.4896 195.839 11.2656 196.562 10.4375C197.292 9.60417 198.354 9.1875 199.75 9.1875C201.151 9.1875 202.216 9.60417 202.945 10.4375C203.674 11.2656 204.039 12.4896 204.039 14.1094C204.039 15.7344 203.674 16.9688 202.945 17.8125C202.216 18.6562 201.151 19.0781 199.75 19.0781ZM199.75 18.0234C200.729 18.0234 201.479 17.6901 202 17.0234C202.521 16.3516 202.781 15.3802 202.781 14.1094C202.781 12.8385 202.521 11.8776 202 11.2266C201.484 10.5703 200.734 10.2422 199.75 10.2422C198.771 10.2422 198.023 10.5703 197.508 11.2266C196.992 11.8776 196.734 12.8385 196.734 14.1094C196.734 15.3854 196.992 16.3568 197.508 17.0234C198.023 17.6901 198.771 18.0234 199.75 18.0234ZM206.742 19.0234C206.367 19.0234 206.18 18.9219 206.18 18.7188V9.69531C206.18 9.54948 206.214 9.44531 206.281 9.38281C206.349 9.3151 206.456 9.28125 206.602 9.28125H208.938C210.047 9.28125 210.88 9.47656 211.438 9.86719C212 10.2578 212.281 10.8802 212.281 11.7344C212.281 12.3125 212.141 12.7995 211.859 13.1953C211.583 13.5859 211.193 13.8802 210.688 14.0781V14.1328C210.958 14.2266 211.18 14.4089 211.352 14.6797C211.529 14.9453 211.724 15.3411 211.938 15.8672L213.023 18.6094C213.049 18.7031 213.062 18.7682 213.062 18.8047C213.062 18.9505 212.867 19.0234 212.477 19.0234H212.336C212.195 19.0234 212.073 19.0052 211.969 18.9688C211.87 18.9271 211.807 18.8724 211.781 18.8047L210.727 16.0781C210.591 15.724 210.432 15.4479 210.25 15.25C210.068 15.0521 209.852 14.9141 209.602 14.8359C209.352 14.7578 209.036 14.7188 208.656 14.7188H207.406V18.7188C207.406 18.9219 207.221 19.0234 206.852 19.0234H206.742ZM209.234 13.6641C209.562 13.6641 209.862 13.5859 210.133 13.4297C210.409 13.2734 210.625 13.0651 210.781 12.8047C210.943 12.5391 211.023 12.2578 211.023 11.9609C211.023 11.4141 210.857 11.0078 210.523 10.7422C210.19 10.4714 209.729 10.3359 209.141 10.3359H207.406V13.6641H209.234Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <Button
+                className="h-12 w-full"
+                variant={isSubmitButtonInView ? undefined : "outline"}
+                onClick={() =>
+                  setVisibleComponent(
+                    shouldShowBackButton
+                      ? ComponentList.SubmitButton
+                      : ComponentList.SetupAccountKey,
+                  )
+                }>
+                <span className="text-center text-lg font-normal leading-normal">
+                  {shouldShowBackButton ? "Go Back" : "Create an Account"}
+                </span>
+              </Button>
+            </>
+          ) : null}
+        </div>
       </div>
     </div>
-  </div>
-
+  );
 };
 
 // @ditorodev: We should see how we improve this to be more like Google's SSO
 // contrast is not very good, as im testing on a train with a lot of sunlight
 // hitting my screen, it is almost impossible to see whats happening the outline
 // buttons have no contrast
-export default function Wrapped() {
-  const [session, setSession] = React.useState<Session>();
-  return <LumeIdentityContext.Provider value={{ session, setSession }}>
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button className='bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md'>
-          Open Lume
-        </button>
-      </Dialog.Trigger>
+export const LumeIdentityTrigger = Dialog.Trigger;
+LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
+export default function Wrapped({ children }: React.PropsWithChildren) {
+  const [open, setOpen] = useState(false);
+  const dialogContentEl = useRef<HTMLElement>();
+  const DefaultTrigger = () => (
+    <LumeIdentityTrigger asChild>
+      <button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
+        Open Lume
+      </button>
+    </LumeIdentityTrigger>
+  );
+  const GivenTrigger = React.Children.toArray(children)
+    .filter((c) => {
+      if (typeof c === "object") {
+        //@ts-expect-error -- I dont know what the type of this should be, i just know that this works
+        return c.type?.displayName === "LumeIdentityTrigger";
+      }
+
+      return false;
+    })
+    .at(0);
+  const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Trigger />
       <Dialog.Portal>
-        <Dialog.Overlay className="bg-black/90 data-[state=open]:animate-overlayShow fixed inset-0" />
-        <Dialog.Content className='w-full h-full flex items-center justify-center'>
+        <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
+        {/* @ditorodev: `left-[calc(50%-192px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}
+        <Dialog.Content className="absolute left-[calc(50%-192px)] top-12 mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center" >
           <SwitchableComponentProvider>
-            <LumeIdentity />
+            <LumeIdentityContext.Provider value={{open, setOpen}}>
+              <LumeIdentity />
+            </LumeIdentityContext.Provider>
           </SwitchableComponentProvider>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
-  </LumeIdentityContext.Provider>
+  );
 }

src/components/lume/LumeIdentity/LumeIdentityContext.ts

@@ -1,43 +1,39 @@
-import React from "react";
+import {
+  login,
+  // loginComplete,
+  // logoutComplete,
+} from "@lumeweb/libkernel/kernel";
+import React, { useContext } from "react";
+import { useAuth } from "../../AuthProvider.js";
 
-export type Session = string;
-export const LumeIdentityContext = React.createContext<{
-  session: Session | undefined;
-  setSession: React.Dispatch<React.SetStateAction<Session | undefined>>;
-} | undefined>(undefined);
-export function useLumeIndentity() {
-  const contextValue = React.useContext(LumeIdentityContext);
+export const LumeIdentityContext = React.createContext<
+  { open: boolean; setOpen: (open: boolean) => void } | undefined
+>(undefined);
 
-  // When the `session` changes we want to update the `session` in the local storage?
-  React.useEffect(() => {
-    if (contextValue?.session) {
-      localStorage.setItem('lume-session', contextValue.session);
-    } else {
-      localStorage.removeItem('lume-session');
-    }
-  }, [contextValue?.session]);
+export function useLumeIdentity() {
+  const { isLoggedIn, setIsLoggedIn } = useAuth();
+  const ctx = useContext(LumeIdentityContext);
 
-  // Get the session from the local storage
-  React.useEffect(() => {
-    const session = localStorage.getItem('lume-session');
-    if (session) {
-      contextValue?.setSession(session);
-    }
-  }, []);
-
-  if (contextValue === undefined) {
-    throw new Error('useLumeIndentity hook is being used outside of its context. Please ensure that it is wrapped within a <LumeIdentityProvider>.');
+  if (!ctx) {
+    throw new Error(
+      "useLumeIdentity should be used inside LumeIdentityContext.Provider",
+    );
   }
 
+  const { setOpen } = ctx;
+
   return {
-    isSignedIn: !!contextValue.session,
-    signIn: (key: string) => {
-      console.log('signing in with key', key);
-      // TODO: From the key generate a session, and store it
-      contextValue.setSession('session');
+    isSignedIn: isLoggedIn,
+    async signIn(key: Uint8Array) {
+      await login(key.slice(0, 32));
+      // await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') `
+      setIsLoggedIn(true);
+      setOpen(false);
     },
-    signOut: () => {
-      contextValue.setSession(undefined);
+    async signOut() {
+      // await logoutComplete();
+      setIsLoggedIn(false);
+      setOpen(false);
     },
   };
 }

src/components/lume/LumeIdentity/components.tsx

@@ -1,44 +1,84 @@
-import { makeSwitchable, useSwitchableComponent } from "../../SwitchableComponent";
+import {
+  makeSwitchable,
+  useSwitchableComponent,
+} from "../../SwitchableComponent";
 import { Button } from "../../ui/button";
 import { Input } from "../../ui/input";
-import { CheckIcon, ClipboardCopyIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import {
+  CheckIcon,
+  ClipboardCopyIcon,
+  ExclamationTriangleIcon,
+} from "@radix-ui/react-icons";
 import { AnimatePresence, m } from "framer-motion";
-import React from "react";
-import { useLumeIndentity } from "./LumeIdentityContext";
+import { useLumeIdentity } from "./LumeIdentityContext";
+import { useMemo, useState } from "react";
+
+import * as bip39 from "@scure/bip39";
+import { wordlist } from "@scure/bip39/wordlists/english";
+import { TW_PREFIX } from "../../../../scoped-tailwind-prefix";
+
+async function seedToKey(seed: string) {
+  return bip39.mnemonicToSeed(seed);
+}
+
+function getStrength(wordCount: number) {
+  switch (wordCount) {
+    case 12:
+      return 128;
+    case 15:
+      return 160;
+    case 18:
+      return 192;
+    case 21:
+      return 224;
+    case 24:
+      return 256;
+    default:
+      throw new Error("Invalid word count");
+  }
+}
 
 // Extracted components
 const SubmitButtonComponent = () => {
   const { setVisibleComponent } = useSwitchableComponent();
   return (
-    <Button className='w-full h-12' variant={"outline"} onClick={() => setVisibleComponent(SeedPhraseInput)}>
-      <span className="text-center text-lg font-normal leading-normal">Sign in with Account Key</span>
+    <Button
+      className="w-full h-12"
+      variant={"outline"}
+      onClick={() => setVisibleComponent(SeedPhraseInput)}>
+      <span className="text-center text-lg font-normal leading-normal">
+        Sign in with Account Key
+      </span>
     </Button>
-  )
+  );
 };
 
 const SeedPhraseInputComponent = () => {
-  const { signIn } = useLumeIndentity();
+  const { signIn } = useLumeIdentity();
   return (
-    <m.form className='flex-col flex gap-y-4' onSubmit={(e) => {
-      e.preventDefault();
-      const target = e.target as typeof e.target & {
-        elements: {
-          seedPhrase: { value: string };
-        }
-      };
-      const seedPhrase = target.elements.seedPhrase.value;
-      signIn(seedPhrase)
-    }}>
-      <Input className='h-12 w-full text-lg' name="seedPhrase" />
+    <m.form
+      className="flex-col flex gap-y-4"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        const target = e.target as typeof e.target & {
+          elements: {
+            seedPhrase: { value: string };
+          };
+        };
+        const seedPhrase = target.elements.seedPhrase.value;
+        signIn(await seedToKey(seedPhrase));
+      }}>
+      <Input className="h-12 w-full text-lg" name="seedPhrase" />
       <m.div
         initial={{ y: 50 }}
         animate={{ y: 0 }}
         exit={{ y: -50 }}
         transition={{ type: "just", delay: 0.1 }}
-        className="h-12"
-      >
-        <Button className='w-full h-full' role="submit">
-          <span className="text-center text-lg font-normal leading-normal">Sign in</span>
+        className="h-12">
+        <Button className="w-full h-full" role="submit">
+          <span className="text-center text-lg font-normal leading-normal">
+            Sign in
+          </span>
         </Button>
       </m.div>
     </m.form>
@@ -47,36 +87,46 @@ const SeedPhraseInputComponent = () => {
 
 const SetupAccountKeyComponent = () => {
   const { setVisibleComponent } = useSwitchableComponent();
-  const [width, setWidth] = React.useState<number>();
+  const [width, setWidth] = useState<number>();
 
   return (
     <m.div
       initial={{ y: 50 }}
       animate={{ y: 0 }}
-      exit={{ y: -50, height: 'auto' }}
+      exit={{ y: -50, height: "auto" }}
       transition={{ type: "just", delay: 0.1 }}
       className="min-h-12 h-full max-w-full"
-      style={{ maxWidth: width ?? 'auto' }}
-      ref={(t) => setTimeout(() => setWidth(t!.getBoundingClientRect().width!), 0)}
-    >
-      <Button className='w-full h-full' onClick={() => setVisibleComponent(SeedPhraseGeneration)}>
-        <span className="text-center text-lg font-normal leading-normal">I get it, I'll keep it safe. Let's see the key.</span>
+      style={{ maxWidth: width ?? "auto" }}
+      ref={(t) => {
+        if (t) {
+          setTimeout(() => setWidth(t.getBoundingClientRect().width!), 0);
+        }
+      }}>
+      <Button
+        className="w-full h-full"
+        onClick={() => setVisibleComponent(SeedPhraseGeneration)}>
+        <span className="text-center text-lg font-normal leading-normal">
+          I get it, I'll keep it safe. Let's see the key.
+        </span>
       </Button>
     </m.div>
-  )
+  );
 };
 
 const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
-  const [buttonClickedState, setButtonClickedState] = React.useState<"idle" | "clicked">("idle");
-  const [step, setStep] = React.useState<number>(0);
-  const { signIn } = useLumeIndentity();
+  const [buttonClickedState, setButtonClickedState] = useState<
+    "idle" | "clicked"
+  >("idle");
+  const [step, setStep] = useState<number>(0);
+  const { signIn } = useLumeIdentity();
 
-  const phrases = React.useMemo(() => {
-    // TODO: Replace with actual BIP39 or whatever is used for phrase generation
-    return Array(phraseLength).fill("a phrase")
+  const phrases = useMemo(() => {
+    return bip39
+      .generateMnemonic(wordlist, getStrength(phraseLength))
+      .split(" ");
   }, [phraseLength]);
 
-  const key = React.useMemo(() => {
+  const key = useMemo(() => {
     return phrases.join(" ");
   }, [phrases]);
 
@@ -84,62 +134,110 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
     navigator.clipboard.writeText(phrases.join(" "));
     setButtonClickedState("clicked");
     setTimeout(() => setButtonClickedState("idle"), 1000);
-  }
+  };
 
   return (
     <div className="relative">
       <AnimatePresence>
-        {step === 1 ? <m.div className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 0.75, top: -200, left: -20, right: -20, bottom: 120 }}
-          transition={{ type: "tween", duration: 0.1 }}
-        ></m.div> : null}
+        {step === 1 ? (
+          <m.div
+            className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`}
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: 0.75,
+              top: -200,
+              left: -20,
+              right: -20,
+              bottom: 120,
+            }}
+            transition={{ type: "tween", duration: 0.1 }}></m.div>
+        ) : null}
       </AnimatePresence>
-      <div className="z-20 relative mb-2.5 w-full h-full flex-wrap justify-center items-center gap-2.5 inline-flex">
+      <div className="z-20 relative mb-2 w-full h-full flex-wrap justify-center items-center gap-2 inline-flex">
         {phrases.map((phrase, index) => (
-          <div key={`SeedPhrase_${index}`} className={`justify-center items-center gap-2.5 flex w-[calc(33%-10px)] h-10 rounded border border-current relative ring-current text-neutral-700`}>
-            <span className=" text-white text-md font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center">{phrase}</span>
-            <span className="left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">{index + 1}</span>
+          <div
+            key={`SeedPhrase_${index}`}
+            className={`${TW_PREFIX} relative justify-center items-center gap-2 flex h-10 rounded border border-current ring-current text-neutral-700 w-[calc(33%-8px)]`}>
+            <span
+              className={`${TW_PREFIX} text-white text-md font-normal leading-normal w-full h-fit px-2 bg-transparent text-center`}>
+              {phrase}
+            </span>
+            <span
+              className={`${TW_PREFIX} left-[6px] top-0 absolute text-current text-xs font-normal leading-normal`}>
+              {index + 1}
+            </span>
           </div>
         ))}
         <AnimatePresence>
-          {step === 1 ? <m.div className="text-red-400 flex flex-row gap-5 py-8"
-            initial={{ opacity: 0, y: 50 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 50 }}
-            transition={{ type: "linear", delay: 0.2, duration: 0.5 }}
-          >
-            <ExclamationTriangleIcon className="w-14 h-14" />
-            <span>Make sure to write this down for safe keeping.</span>
-          </m.div> : null}
+          {step === 1 ? (
+            <m.div
+              className="text-red-400 flex flex-row gap-5 py-8"
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 50 }}
+              transition={{ type: "linear", delay: 0.2, duration: 0.5 }}>
+              <ExclamationTriangleIcon className="w-14 h-14" />
+              <span>Make sure to write this down for safe keeping.</span>
+            </m.div>
+          ) : null}
         </AnimatePresence>
-        <Button className={`w-full h-12 ${buttonClickedState === 'clicked' ? '!text-primary !border-primary' : ''}`} variant="outline" onClick={copyPhrasesToClipboard}>
-          {buttonClickedState === 'clicked' ? <CheckIcon className="w-5 h-5 mr-2.5" /> : <ClipboardCopyIcon className="w-5 h-5 mr-2.5" />}
-          {buttonClickedState === 'clicked' ? 'Copied!' : 'Copy Account Key'}
+        <Button
+          className={`${TW_PREFIX} w-[calc(100%-8px)] h-12 ${
+            buttonClickedState === "clicked"
+              ? "!text-primary !border-primary"
+              : ""
+          }`}
+          variant="outline"
+          onClick={copyPhrasesToClipboard}>
+          {buttonClickedState === "clicked" ? (
+            <CheckIcon className="w-5 h-5 mr-2.5" />
+          ) : (
+            <ClipboardCopyIcon className="w-5 h-5 mr-2.5" />
+          )}
+          {buttonClickedState === "clicked" ? "Copied!" : "Copy Account Key"}
         </Button>
       </div>
       {step === 0 ? (
-        <Button className="z-20 w-full h-12 text-white bg-neutral-700 hover:bg-neutral-800" variant="secondary" onClick={() => setStep(1)}>
+        <Button
+          className="z-20 ml-1 w-[calc(100%-8px)] h-12 text-white border border-neutral-700 bg-neutral-700 hover:bg-neutral-800"
+          variant="secondary"
+          onClick={() => setStep(1)}>
           Continue
         </Button>
       ) : null}
       <AnimatePresence>
-        {step === 1 ? <m.div className="z-20 w-full h-12"
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 50 }}
-          transition={{ type: "linear", delay: 2, duration: 0.5 }}
-        >
-          <Button className="w-full h-full" onClick={() => signIn(key)}>
-            Sign In
-          </Button>
-        </m.div> : null}
+        {step === 1 ? (
+          <m.div
+            className="z-20 w-full h-12"
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 50 }}
+            transition={{ type: "linear", delay: 2, duration: 0.5 }}>
+            <Button
+              className="w-full h-full"
+              onClick={async () => signIn(await seedToKey(key))}>
+              Sign In
+            </Button>
+          </m.div>
+        ) : null}
       </AnimatePresence>
     </div>
-  )
+  );
 };
 
-export const SubmitButton = makeSwitchable(SubmitButtonComponent, 'submit-button');
-export const SeedPhraseInput = makeSwitchable(SeedPhraseInputComponent, 'seed-phrase-input');
-export const SetupAccountKey = makeSwitchable(SetupAccountKeyComponent, 'setup-account-key');
-export const SeedPhraseGeneration = makeSwitchable(SeedPhraseGenerationComponent, 'seed-phrase-form');
+export const SubmitButton = makeSwitchable(
+  SubmitButtonComponent,
+  "submit-button",
+);
+export const SeedPhraseInput = makeSwitchable(
+  SeedPhraseInputComponent,
+  "seed-phrase-input",
+);
+export const SetupAccountKey = makeSwitchable(
+  SetupAccountKeyComponent,
+  "setup-account-key",
+);
+export const SeedPhraseGeneration = makeSwitchable(
+  SeedPhraseGenerationComponent,
+  "seed-phrase-form",
+);

src/components/lume/LumeProvider.tsx

@@ -1,74 +0,0 @@
-import React, { useContext } from 'react';
-
-type LumeSyncState = 'syncing' | 'done' | 'error'
-
-export type Chain = {
-  syncState: LumeSyncState,
-  name: string,
-  chainId: string,
-  active: boolean,
-  progress: number, // in porcentage
-  logs: string[],
-  type: 'blockchain' | 'content',
-  peerCount?: number
-}
-
-type LumeObject = {
-  chains: Chain[],
-  activeResolver: 'local' | 'rpc'
-}
-
-type LumeContext = {
-  lume: LumeObject
-}
-
-const LumeContext = React.createContext<LumeContext | undefined>(undefined);
-
-const LumeProvider = ({ children }: { children: React.ReactNode }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [lume, _setLume] = React.useState<LumeObject>({
-    chains: [
-      {
-        name: 'Ethereum',
-        syncState: 'done',
-        chainId: '1',
-        active: true,
-        progress: 100,
-        logs: [],
-        type: 'blockchain'
-      },
-      {
-        name: "IPFS",
-        syncState: 'syncing',
-        chainId: '2',
-        active: false,
-        progress: 50,
-        logs: [],
-        type: 'content',
-        peerCount: 3
-      }
-    ],
-    activeResolver: 'local',
-  });
-
-  // Here you can add the logic to update the lume state
-
-  return (
-    <LumeContext.Provider value={{ lume }}>
-      {children}
-    </LumeContext.Provider>
-  );
-};
-
-export default LumeProvider;
-
-export function useLume() {
-  const ctx = useContext(LumeContext);
-
-  if (!ctx) {
-    throw new Error('useLume must be used within a LumeProvider');
-  }
-
-  const { lume } = ctx;
-  return lume
-}

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../components/utils"
+import { cn } from "../utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
@@ -31,27 +31,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/input.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "../../components/utils"
+import { cn } from "../utils";
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> { }
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -12,14 +12,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-9 w-full text-white rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 focus:border-white",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

src/components/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

src/index.ts

@@ -0,0 +1,24 @@
+export {
+  default as AuthProvider,
+  useAuth,
+  type AuthContextType,
+} from "./components/AuthProvider";
+export {
+  default as NetworksProvider,
+  useNetworks,
+  type NetworksContextType,
+} from "./components/NetworksProvider";
+export {
+  default as LumeStatusProvider,
+  useLumeStatus,
+  type LumeStatusContextType,
+} from "./components/LumeStatusProvider";
+export {
+  default as LumeDashboard,
+  LumeDashboardTrigger,
+} from "./components/lume/LumeDashboard/LumeDashboard";
+export {
+  default as LumeIdentity,
+  LumeIdentityTrigger,
+} from "./components/lume/LumeIdentity/LumeIdentity";
+import "../styles/globals.css";

src/main.ts

@@ -1,4 +0,0 @@
-export { default as LumeProvider, useLume } from './components/lume/LumeProvider';
-export { default as LumeDashboard } from './components/lume/LumeDashboard/LumeDashboard';
-export { default as LumeIdentity } from './components/lume/LumeIdentity/LumeIdentity';
-import "../styles/globals.css";

stories/LumeDashboard.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import LumeDashboard from "../src/components/lume/LumeDashboard/LumeDashboard.js";
+import NetworksProvider from "../src/components/NetworksProvider.js";
+
+export default {
+  title: "LumeDashboard",
+  component: LumeDashboard,
+} as Meta<typeof LumeDashboard>;
+
+const Template: StoryFn<typeof LumeDashboard> = (args) => (
+  <NetworksProvider>
+    <LumeDashboard {...args} />
+  </NetworksProvider>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  // Add initial props here
+};

stories/LumeIdentity.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import LumeIdentity from "../src/components/lume/LumeIdentity/LumeIdentity.js";
+import AuthProvider from "../src/components/AuthProvider.js";
+
+export default {
+  title: "LumeIdentity",
+  component: LumeIdentity,
+} as Meta<typeof LumeIdentity>;
+
+const Template: StoryFn<typeof LumeIdentity> = (args) => (
+  <AuthProvider>
+    <LumeIdentity {...args} />
+  </AuthProvider>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  // Add initial props here
+};

tailwind.config.ts

@@ -1,15 +1,9 @@
-import {type Config} from "tailwindcss";
+import { type Config } from "tailwindcss";
 
 export default {
   darkMode: ["class"],
-  content: [
-    './src/**/*.{ts,tsx}',
-  ],
-  safelist: [
-    'text-primary',
-    'text-red-500',
-    'text-orange-500',
-  ],
+  content: ["./src/**/*.{ts,tsx}"],
+  safelist: ["text-primary", "text-red-500", "text-orange-500"],
   theme: {
     container: {
       center: true,
@@ -76,4 +70,4 @@ export default {
     },
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;

tsconfig.build.json

@@ -1,47 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "composite": true,
-    "module": "ESNext",
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "outDir": "./dist",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    // "paths": {
-    //   "@/*": ["src/*"],
-    //   "@/styles/*": ["styles/*"],
-    // },
-    "typeRoots": [
-      "src/vite-env.d.ts"
-    ]
-  },
-  "include": [
-    "./src/**/*",
-    // "./src/components/lume/LumeDashboard/LumeDashboard."
-  ],
-  "exclude": [
-    "**/*.stories.tsx"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "composite": true,
-    "module": "ESNext",
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    // "paths": {
-    //   "@/*": ["src/*"],
-    //   "@/styles/*": ["styles/*"],
-    // },
-    "typeRoots": ["src/vite-env.d.ts"]
-  },
-  "include": [
-    "src",
-    "scripts",
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts",
-    "lib"
-  ]
-}

vite.config.ts

@@ -1,23 +1,34 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import scopeTailwind from "./lib/vite-plugin-scope-tailwind/src/main"
-import { resolve } from "path"
-import svgr from "vite-plugin-svgr"
-import dts from "vite-plugin-dts"
-// import css from 'rollup-plugin-css-only'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import scopeTailwind from "vite-plugin-scope-tailwind";
+import { resolve } from "path";
+import svgr from "vite-plugin-svgr";
+import dts from "vite-plugin-dts";
+import optimizer from "vite-plugin-optimizer";
+import noBundlePlugin from "vite-plugin-no-bundle";
+import { TW_PREFIX } from "./scoped-tailwind-prefix";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     svgr(),
     react(),
-    scopeTailwind({ react: true, classNameTransformers: ["cn"] }),
-    dts({
-      tsconfigPath: "tsconfig.build.json"
+    scopeTailwind({
+      react: true,
+      prefix: TW_PREFIX,
+      classNameTransformers: ["cn"],
     }),
-    // css({ output: 'styles/globals.css' })
+    dts({
+      tsconfigPath: "tsconfig.build.json",
+    }),
+    optimizer({
+      "node-fetch":
+        "const e = undefined; export default e;export {e as Response, e as FormData, e as Blob};",
+    }),
+    noBundlePlugin(),
   ],
   resolve: {
+    dedupe: ["@lumeweb/libportal", "@lumeweb/libweb", "@lumeweb/libkernel"],
     // TODO: For some reason aliases are not working....
     // alias: {
     //   '@styles/': resolve(__dirname, './styles'),
@@ -27,23 +38,30 @@ export default defineConfig({
     // },
   },
   build: {
-    manifest: true,
-    outDir: "dist",
+    manifest: false,
+    outDir: "lib",
     emptyOutDir: true,
     sourcemap: true,
+    minify: false,
     lib: {
-      entry: resolve(__dirname, "src/main.ts"),
-      name: "lume-sdk",
-      fileName: (format) => `lib.${format}.js`
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "sdk",
+      fileName: "index",
+      formats: ["es"],
     },
     rollupOptions: {
+      output: {
+        inlineDynamicImports: false,
+      },
       external: [
         "react",
         "react-dom",
-        // "framer-motion",
-        // "tailwind-merge",
-        // "class-variance-authority"
-      ]
-    }
-  }
-})
+        "@lumeweb/libportal",
+        "@lumeweb/libweb",
+        "@lumeweb/libkernel/module",
+        "@lumeweb/libkernel/kernel",
+        "@lumeweb/libkernel",
+      ],
+    },
+  },
+});