Feature/lit 1598 js sdk v3 fix unable to use sessionsigs to pkpsign

apps/demo-pkp-session-sigs/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/demo-pkp-session-sigs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/demo-pkp-session-sigs/app/base.css

@@ -0,0 +1,115 @@
+/* 
+  Reference:
+  https://www.radix-ui.com/docs/primitives 
+*/
+
+@import "@radix-ui/colors/blackA.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/slate.css";
+@import "@radix-ui/colors/violet.css";
+@import "@radix-ui/colors/red.css";
+
+/* 
+// --------------------------------------
+//          Base Configuration                                    
+// -------------------------------------- 
+*/
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
+
+@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+/**
+Usage:
+<main className="app" data-lit-theme="purple">
+  <Component {...pageProps} />
+</main>
+[data-lit-theme="purple"] .button
+**/
+[data-lit-theme="purple"] {
+  --lit-background-color: #0a132d;
+  --lit-text-color: #e3e7ef;
+  --lit-main-color: #7f53ad; /** eg. border, filled button **/
+  --lit-secondary-color: #1f1e44;
+  --lit-success-color: #10b981;
+  --lit-alert-color: #ca3b31; /** eg. uninstall button **/
+  --lit-disabled-color: #535a6c; /** eg. inactive/unfocused button **/
+
+  --lit-border-radius: 6px; /** eg. button, input **/
+  --lit-border-radius-icon: 12px;
+  --lit-border-radius-tag: 999px; /** eg. tag **/
+
+  /* usage */
+  --lit-border-color: var(--lit-main-color);
+  --lit-button-filled-color: var(--lit-main-color);
+}
+
+body {
+  font-family: "Figtree", "Space Grotesk", -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+    Helvetica Neue, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.heading h1 {
+  background: linear-gradient(
+      20deg,
+      rgb(255, 244, 207) 10%,
+      var(--lit-main-color) 100%
+    )
+    text;
+}
+@media screen and (min-width: 768px) {
+  .heading h1 {
+    font-size: 64px;
+    line-height: 72px;
+  }
+}
+
+@media screen and (min-width: 640px) {
+  .heading h1 {
+    font-size: 48px;
+    line-height: 56px;
+  }
+}
+
+.lit-loading {
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  font-size: 12px;
+}
+
+.lit-loading svg {
+  width: 24px;
+  height: 24px;
+  margin: auto;
+  text-align: center;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* 
+// ------------------------------
+//          Animations
+// ------------------------------ 
+*/
+@keyframes loading {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}