@jaw.id/ui 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+## 0.0.3 (2026-02-19)
+
+### 🩹 Fixes
+
+- **core,ui,wagmi:** updated README.mds ([#112](https://github.com/JustaName-id/jaw-mono/pull/112))
+
+### 🧱 Updated Dependencies
+
+- Updated @jaw.id/core to 0.0.2
+
+### ❤️ Thank You
+
+- Ghadi @Ghadi8
+
+## 0.0.2 (2026-02-19)
+
+### 🩹 Fixes
+
+- **ui,keys:** prevent crash when call permission selector is undefined ([#111](https://github.com/JustaName-id/jaw-mono/pull/111))
+
+### ❤️ Thank You
+
+- Leo Franklin @LeoFranklin015

package/README.md

@@ -1,54 +1,44 @@
 # @jaw.id/ui
 
-React UI components for JAW (JustaName Account Wallet) - pre-built dialogs for wallet interactions.
+Pre-built React dialogs for [JAW.id](https://jaw.id) wallet interactions: onboarding, transaction signing, permissions, and more.
+
+## Documentation
+
+For documentation and guides, visit [docs.jaw.id](https://docs.jaw.id).
 
 ## Installation
 
 ```bash
 npm install @jaw.id/ui
-```
-
-Import styles in your app entry point:
-
-```typescript
-import '@jaw.id/ui/style.css';
+# or
+bun add @jaw.id/ui
 ```
 
 ## Quick Start
 
-Use `ReactUIHandler` with app-specific passkey mode:
-
 ```tsx
 import { JAW } from '@jaw.id/core';
 import { ReactUIHandler } from '@jaw.id/ui';
-import '@jaw.id/ui/style.css';
 
-const uiHandler = new ReactUIHandler({
-  container: document.getElementById('jaw-ui-root')!,
-});
+const uiHandler = new ReactUIHandler();
 
-const jaw = await JAW.create({
+const jaw = JAW.create({
   apiKey: 'your-api-key',
   appName: 'My App',
-  mode: 'appSpecific',
-  uiHandler,
+  preference: {
+    mode: 'AppSpecific',
+    uiHandler,
+  },
 });
 ```
 
-## Exports
+## AI-Assisted Development
 
-**Dialog Components:** `OnboardingDialog`, `ConnectDialog`, `TransactionDialog`, `SignatureDialog`, `Eip712Dialog`, `SiweDialog`, `PermissionDialog`, `DefaultDialog`
+Add JAW.id skills to your AI coding agent:
 
-**React Integration:** `ReactUIHandler` - Complete UIHandler implementation for app-specific mode
-
-## Peer Dependencies
-
-- `react` >= 18.0.0
-- `react-dom` >= 18.0.0
-
-## Documentation
-
-For detailed guides and examples, visit **[docs.jaw.id](https://docs.jaw.id)**.
+```bash
+npx skills add JustaName-id/jaw-skills
+```
 
 ## License
 

package/dist/{ccip-Cdkx99iZ.js → ccip-BYa9WTP9.js}

@@ -1,4 +1,4 @@
-import { B as p, g as m, s as w, d as k, i as b, l as L, a as O, c as R, b as E, e as x, H as y, f as M } from "./index-DlfjdYW4.js";
+import { B as p, g as m, s as w, d as k, i as b, l as L, a as O, c as R, b as E, e as x, H as y, f as M } from "./index-DBYNWeek.js";
 class S extends p {
   constructor({ callbackSelector: s, cause: e, data: o, extraData: n, sender: c, urls: t }) {
     super(e.shortMessage || "An error occurred while fetching for an offchain result.", {

package/dist/components/PermissionDialog/types.d.ts

@@ -10,7 +10,7 @@ export interface SpendPermission {
 }
 export interface CallPermission {
     target: string;
-    selector: string;
+    selector?: string;
     functionSignature: string;
 }
 export interface PermissionDialogProps {

package/dist/components/PermissionDialog/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PermissionDialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAGtC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IAGzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IAGzB,UAAU,EAAE,MAAM,CAAC;IAGnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAGrB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,SAAS,CAAC,EAAE,IAAI,CAAC;IAGjB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,aAAa,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PermissionDialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAGtC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IAGzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IAGzB,UAAU,EAAE,MAAM,CAAC;IAGnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAGrB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,SAAS,CAAC,EAAE,IAAI,CAAC;IAGjB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,aAAa,EAAE,MAAM,CAAC;CACvB"}

package/dist/{index-DlfjdYW4.js → index-DBYNWeek.js}

@@ -40082,7 +40082,7 @@ async function Eg(t, e) {
     });
     return z === "0x" ? { data: void 0 } : { data: z };
   } catch (_) {
-    const L = AW(_), { offchainLookup: O, offchainLookupSignature: C } = await import("./ccip-Cdkx99iZ.js");
+    const L = AW(_), { offchainLookup: O, offchainLookupSignature: C } = await import("./ccip-BYa9WTP9.js");
     if (t.ccipRead !== !1 && L?.slice(0, 10) === C && x)
       return { data: await O(t, { data: L, to: x }) };
     throw N && L?.slice(0, 10) === "0x101bb98d" ? new Qq({ factory: d }) : x5(_, {
@@ -71973,6 +71973,11 @@ const zd = [
         name: "entryPointAddress",
         type: "address",
         internalType: "address"
+      },
+      {
+        name: "factory",
+        type: "address",
+        internalType: "address"
       }
     ],
     stateMutability: "nonpayable"
@@ -71985,6 +71990,19 @@ const zd = [
     type: "receive",
     stateMutability: "payable"
   },
+  {
+    type: "function",
+    name: "REPLAYABLE_NONCE_KEY",
+    inputs: [],
+    outputs: [
+      {
+        name: "",
+        type: "uint256",
+        internalType: "uint256"
+      }
+    ],
+    stateMutability: "view"
+  },
   {
     type: "function",
     name: "addOwnerAddress",
@@ -72016,6 +72034,25 @@ const zd = [
     outputs: [],
     stateMutability: "nonpayable"
   },
+  {
+    type: "function",
+    name: "canSkipChainIdValidation",
+    inputs: [
+      {
+        name: "functionSelector",
+        type: "bytes4",
+        internalType: "bytes4"
+      }
+    ],
+    outputs: [
+      {
+        name: "",
+        type: "bool",
+        internalType: "bool"
+      }
+    ],
+    stateMutability: "pure"
+  },
   {
     type: "function",
     name: "eip712Domain",
@@ -72125,6 +72162,19 @@ const zd = [
     outputs: [],
     stateMutability: "nonpayable"
   },
+  {
+    type: "function",
+    name: "executeWithoutChainIdValidation",
+    inputs: [
+      {
+        name: "calls",
+        type: "bytes[]",
+        internalType: "bytes[]"
+      }
+    ],
+    outputs: [],
+    stateMutability: "payable"
+  },
   {
     type: "function",
     name: "getNonce",
@@ -72138,6 +72188,72 @@ const zd = [
     ],
     stateMutability: "view"
   },
+  {
+    type: "function",
+    name: "getUserOpHashWithoutChainId",
+    inputs: [
+      {
+        name: "userOp",
+        type: "tuple",
+        internalType: "struct PackedUserOperation",
+        components: [
+          {
+            name: "sender",
+            type: "address",
+            internalType: "address"
+          },
+          {
+            name: "nonce",
+            type: "uint256",
+            internalType: "uint256"
+          },
+          {
+            name: "initCode",
+            type: "bytes",
+            internalType: "bytes"
+          },
+          {
+            name: "callData",
+            type: "bytes",
+            internalType: "bytes"
+          },
+          {
+            name: "accountGasLimits",
+            type: "bytes32",
+            internalType: "bytes32"
+          },
+          {
+            name: "preVerificationGas",
+            type: "uint256",
+            internalType: "uint256"
+          },
+          {
+            name: "gasFees",
+            type: "bytes32",
+            internalType: "bytes32"
+          },
+          {
+            name: "paymasterAndData",
+            type: "bytes",
+            internalType: "bytes"
+          },
+          {
+            name: "signature",
+            type: "bytes",
+            internalType: "bytes"
+          }
+        ]
+      }
+    ],
+    outputs: [
+      {
+        name: "",
+        type: "bytes32",
+        internalType: "bytes32"
+      }
+    ],
+    stateMutability: "view"
+  },
   {
     type: "function",
     name: "initialize",
@@ -72490,6 +72606,33 @@ const zd = [
     name: "JustanAccount_AlreadyInitialized",
     inputs: []
   },
+  {
+    type: "error",
+    name: "JustanAccount_InvalidNonceKey",
+    inputs: [
+      {
+        name: "key",
+        type: "uint256",
+        internalType: "uint256"
+      }
+    ]
+  },
+  {
+    type: "error",
+    name: "JustanAccount_SelectorNotAllowed",
+    inputs: [
+      {
+        name: "selector",
+        type: "bytes4",
+        internalType: "bytes4"
+      }
+    ]
+  },
+  {
+    type: "error",
+    name: "JustanAccount_UnauthorizedInitialization",
+    inputs: []
+  },
   {
     type: "error",
     name: "MultiOwnable_AlreadyOwner",
@@ -72581,7 +72724,7 @@ const zd = [
     type: "constructor",
     inputs: [
       {
-        name: "implementation",
+        name: "entryPointAddress",
         type: "address",
         internalType: "address"
       }
@@ -72664,7 +72807,12 @@ const zd = [
   },
   {
     type: "error",
-    name: "OwnerRequired",
+    name: "JustanAccountFactory_AlreadyDeployed",
+    inputs: []
+  },
+  {
+    type: "error",
+    name: "JustanAccountFactory_OwnerRequired",
     inputs: []
   }
 ];
@@ -75231,12 +75379,15 @@ async function bfe(t, e) {
 function oA(t) {
   return {
     ...t,
-    spends: t.spends.map((e) => ({
-      token: e.token,
-      allowance: e.allowance,
-      unit: yfe(e.unit),
-      multiplier: e.multiplier
-    }))
+    spends: t.spends.map((e) => {
+      const n = e.unit === "year" ? "month" : e.unit, r = e.unit === "year" ? e.multiplier * 12 : e.multiplier;
+      return {
+        token: e.token,
+        allowance: e.allowance,
+        unit: yfe(n),
+        multiplier: r
+      };
+    })
   };
 }
 function xU(t) {
@@ -75284,8 +75435,7 @@ function yfe(t) {
     day: 2,
     week: 3,
     month: 4,
-    year: 5,
-    forever: 6
+    forever: 5
   }[t];
 }
 const yb = [
@@ -75321,7 +75471,7 @@ const yb = [
               { name: "token", type: "address" },
               { name: "allowance", type: "uint160" },
               { name: "unit", type: "uint8" },
-              { name: "multiplier", type: "uint8" }
+              { name: "multiplier", type: "uint16" }
             ]
           }
         ]
@@ -75358,7 +75508,7 @@ const yb = [
               { name: "token", type: "address" },
               { name: "allowance", type: "uint160" },
               { name: "unit", type: "uint8" },
-              { name: "multiplier", type: "uint8" }
+              { name: "multiplier", type: "uint16" }
             ]
           }
         ]
@@ -75396,7 +75546,7 @@ const yb = [
               { name: "token", type: "address" },
               { name: "allowance", type: "uint160" },
               { name: "unit", type: "uint8" },
-              { name: "multiplier", type: "uint8" }
+              { name: "multiplier", type: "uint16" }
             ]
           }
         ]
@@ -75434,7 +75584,7 @@ const yb = [
               { name: "token", type: "address" },
               { name: "allowance", type: "uint160" },
               { name: "unit", type: "uint8" },
-              { name: "multiplier", type: "uint8" }
+              { name: "multiplier", type: "uint16" }
             ]
           }
         ]
@@ -75481,7 +75631,7 @@ const yb = [
               { name: "token", type: "address" },
               { name: "allowance", type: "uint160" },
               { name: "unit", type: "uint8" },
-              { name: "multiplier", type: "uint8" }
+              { name: "multiplier", type: "uint16" }
             ]
           }
         ]
@@ -80844,7 +80994,7 @@ const JS = ({ to: t, data: e, chainId: n, apiKey: r }) => {
       I.removeEventListener("wheel", U);
     };
   }, []);
-  const W = _h(l || 1, d, 24), Z = f || W, Q = (I) => I.toLowerCase() === IS.toLowerCase() ? "Any Contract" : null, K = (I, U) => U.toLowerCase() === ffe.toLowerCase() ? "Any Function" : I, Y = (I) => I ? `${I.slice(0, 5)}...${I.slice(-4)}` : "", ae = (I, U) => {
+  const W = _h(l || 1, d, 24), Z = f || W, Q = (I) => I.toLowerCase() === IS.toLowerCase() ? "Any Contract" : null, K = (I, U) => U?.toLowerCase() === ffe.toLowerCase() ? "Any Function" : I, Y = (I) => I ? `${I.slice(0, 5)}...${I.slice(-4)}` : "", ae = (I, U) => {
     typeof window < "u" && navigator?.clipboard && (navigator.clipboard.writeText(I), U(!0), setTimeout(() => U(!1), 3e3));
   }, X = !m && !b && !$ && !E && (!P || v), te = o.length, H = a.length, D = te + H;
   return /* @__PURE__ */ j(
@@ -82588,8 +82738,8 @@ function R0e({
     };
   }), [Z, d, N, v]), Y = ct(() => Q.map((H) => ({
     target: H.target,
-    selector: H.selector || "",
-    functionSignature: H.functionSignature || uM(H.selector || "")
+    selector: H.selector,
+    functionSignature: H.functionSignature || (H.selector ? uM(H.selector) : "Unknown Function")
   })), [Q]), ae = ct(() => oM(t.data.expiry), [t.data.expiry]), le = ct(() => {
     const H = [];
     if (K.length > 0) {
@@ -82943,8 +83093,8 @@ function B0e({
     };
   }) : [], [g, h, S, M]), K = ct(() => g?.calls ? g.calls.map((te) => ({
     target: te.target,
-    selector: te.selector || "",
-    functionSignature: te.functionSignature || uM(te.selector || "")
+    selector: te.selector,
+    functionSignature: te.functionSignature || (te.selector ? uM(te.selector) : "Unknown Function")
   })) : [], [g]), Y = ct(() => {
     if (!g) return "";
     const te = parseInt(g.end, 10);

package/dist/index.js

@@ -1,4 +1,4 @@
-import { q as e, m as o, C as n, o as c, n as i, D as t, E as l, r, p as I, F as d, G as g, L as D, h as k, O as u, P as T, R as C, S as p, j as h, T as m, U as f, t as E, W as P, I as S, k as U, N as y, A, J as F, K as G, z as N, M as O, v as R, y as b, w as v, x as w, u as x } from "./index-DlfjdYW4.js";
+import { q as e, m as o, C as n, o as c, n as i, D as t, E as l, r, p as I, F as d, G as g, L as D, h as k, O as u, P as T, R as C, S as p, j as h, T as m, U as f, t as E, W as P, I as S, k as U, N as y, A, J as F, K as G, z as N, M as O, v as R, y as b, w as v, x as w, u as x } from "./index-DBYNWeek.js";
 export {
   e as BadgeDollarIcon,
   o as CloseIcon,

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jaw.id/ui",
-  "version": "0.0.1",
+  "description": "Pre-built React dialogs for JAW.id",
+  "version": "0.0.3",
   "type": "module",
   "sideEffects": [
     "**/*.css",
@@ -64,4 +65,4 @@
     "tailwindcss": "3",
     "vite-plugin-lib-inject-css": "^2.2.2"
   }
-}
+}

package/src/components/PermissionDialog/index.tsx

@@ -149,8 +149,8 @@ export const PermissionDialog = ({
     return null;
   };
 
-  const getFunctionDisplayName = (signature: string, selector: string): string => {
-    if (selector.toLowerCase() === ANY_FN_SEL.toLowerCase()) {
+  const getFunctionDisplayName = (signature: string, selector?: string): string => {
+    if (selector?.toLowerCase() === ANY_FN_SEL.toLowerCase()) {
       return 'Any Function';
     }
     return signature;

package/src/components/PermissionDialog/types.ts

@@ -12,7 +12,7 @@ export interface SpendPermission {
 
 export interface CallPermission {
   target: string;
-  selector: string;
+  selector?: string;
   functionSignature: string;
 }
 

package/src/react/ReactUIHandler.tsx

@@ -2195,8 +2195,8 @@ function PermissionDialogWrapper({
   // Format call permissions
   const calls = useMemo(() => callsData.map(call => ({
     target: call.target,
-    selector: call.selector || '',
-    functionSignature: call.functionSignature || resolveFunctionSelector(call.selector || ''),
+    selector: call.selector,
+    functionSignature: call.functionSignature || (call.selector ? resolveFunctionSelector(call.selector) : 'Unknown Function'),
   })), [callsData]);
 
   // Format expiry date
@@ -2818,8 +2818,8 @@ function RevokePermissionDialogWrapper({
 
     return fetchedPermissionData.calls.map((call: any) => ({
       target: call.target,
-      selector: call.selector || '',
-      functionSignature: call.functionSignature || resolveFunctionSelector(call.selector || ''),
+      selector: call.selector,
+      functionSignature: call.functionSignature || (call.selector ? resolveFunctionSelector(call.selector) : 'Unknown Function'),
     }));
   }, [fetchedPermissionData]);