@jaw.id/ui 0.0.2 → 0.0.4

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

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jaw.id/ui",
-  "version": "0.0.2",
+  "description": "Pre-built React dialogs for JAW.id",
+  "version": "0.0.4",
   "type": "module",
   "sideEffects": [
     "**/*.css",
@@ -15,6 +16,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist",
+    "cjs-error.cjs",
+    "!**/*.tsbuildinfo"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,6 +30,7 @@
       "@jaw-mono/source": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
+      "require": "./cjs-error.cjs",
       "default": "./dist/index.js"
     }
   },
@@ -32,7 +39,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@jaw.id/core": "0.0.1",
+    "@jaw.id/core": "0.0.2",
     "@hookform/resolvers": "^5.2.2",
     "@justaname.id/sdk": "^0.2.204",
     "@radix-ui/react-accordion": "^1.2.12",

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}

package/CHANGELOG.md

@@ -1,9 +0,0 @@
-## 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/components.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/styles.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
-}

package/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/src/components/ConnectDialog/index.tsx

@@ -1,270 +0,0 @@
-'use client'
-
-import { useState, useEffect } from "react";
-import { BadgeDollarIcon, EyeIcon, CopyIcon, CopiedIcon } from "../../icons";
-import { useIsMobile } from "../../hooks";
-import { DefaultDialog } from "../DefaultDialog";
-import { Button } from "../ui/button";
-import { ConnectDialogProps } from "./types";
-import { getJustaNameInstance } from "../../utils/justaNameInstance";
-
-export const ConnectDialog = ({
-  open,
-  onOpenChange,
-  appName,
-  appLogoUrl,
-  origin,
-  timestamp,
-  accountName,
-  walletAddress,
-  chainName,
-  chainId,
-  chainIcon,
-  mainnetRpcUrl,
-  onConnect,
-  onCancel,
-  showPermissions = true,
-  isProcessing,
-}: ConnectDialogProps) => {
-  const isMobile = useIsMobile();
-  const [resolvedAddress, setResolvedAddress] = useState<string | null>(null);
-  const [isAddressCopied, setIsAddressCopied] = useState(false);
-
-  // Resolve wallet address to human-readable name
-  useEffect(() => {
-    if (walletAddress && chainId) {
-      const justaName = getJustaNameInstance(mainnetRpcUrl);
-      justaName.subnames.reverseResolve({
-        address: walletAddress as `0x${string}`,
-        chainId: chainId,
-      }).then((result) => {
-        if (result) {
-          setResolvedAddress(result);
-        }
-      }).catch(() => {
-        // Silently fail if resolution fails
-      });
-    }
-  }, [walletAddress, chainId]);
-
-  // Use resolved address, then accountName prop, then truncated address
-  const displayName = resolvedAddress || accountName;
-
-  // Format origin to display only domain (remove protocol)
-  const formatOrigin = (url: string) => {
-    try {
-      const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`);
-      return urlObj.hostname.replace('www.', '');
-    } catch {
-      return origin;
-    }
-  };
-
-  const copyToClipboard = (text: string) => {
-    if (typeof window !== 'undefined' && navigator?.clipboard) {
-      navigator.clipboard.writeText(text);
-      setIsAddressCopied(true);
-      setTimeout(() => setIsAddressCopied(false), 3000);
-    }
-  };
-
-  // Format wallet address for display
-  const formatAddress = (address: string) => {
-    if (!address || address.length < 10) return address;
-    return `${address.slice(0, 6)}...${address.slice(-4)}`;
-  };
-
-  return (
-    <DefaultDialog
-      open={open}
-      handleClose={onCancel}
-      onOpenChange={!isProcessing ? onOpenChange : undefined}
-      header={
-        <div className="flex flex-col gap-2.5 p-3.5">
-          <p className="text-xs font-bold text-muted-foreground leading-[100%]">
-            {timestamp.toLocaleDateString('en-US', {
-              weekday: 'long',
-              day: 'numeric',
-              month: 'long'
-            })} at {timestamp.toLocaleTimeString('en-US', {
-              hour: '2-digit',
-              minute: '2-digit',
-              second: '2-digit',
-              timeZoneName: 'short'
-            })}
-          </p>
-          <div className="flex flex-col gap-1">
-            <div className="flex flex-row items-center gap-1">
-              <p className="text-sm leading-none text-muted-foreground">
-                Sign in as {displayName || formatAddress(walletAddress)}
-              </p>
-              {!displayName && (
-                isAddressCopied ? (
-                  <CopiedIcon width={10} height={10} className="flex-shrink-0" />
-                ) : (
-                  <CopyIcon
-                    width={10}
-                    height={10}
-                    onClick={() => copyToClipboard(walletAddress)}
-                    className="cursor-pointer flex-shrink-0"
-                  />
-                )
-              )}
-            </div>
-            {displayName && (
-              <div className="flex flex-row items-center gap-1">
-                <p className="text-sm leading-none text-muted-foreground">
-                  {formatAddress(walletAddress)}
-                </p>
-                {isAddressCopied ? (
-                  <CopiedIcon width={10} height={10} className="flex-shrink-0" />
-                ) : (
-                  <CopyIcon
-                    width={10}
-                    height={10}
-                    onClick={() => copyToClipboard(walletAddress)}
-                    className="cursor-pointer flex-shrink-0"
-                  />
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      }
-      contentStyle={isMobile ? {
-        width: '100%',
-        height: '100%',
-        maxWidth: 'none',
-        maxHeight: 'none',
-      } : {
-        width: 'fit-content',
-        maxWidth: '500px',
-      }}
-    >
-      <div className="flex flex-col h-full gap-3 overflow-y-auto min-h-0">
-        {/* App Logo and Title */}
-        <div className="flex flex-1 flex-col p-3.5 items-center justify-center">
-          {appLogoUrl && (
-            <img
-              src={appLogoUrl}
-              alt={`${appName} logo`}
-              className="w-[72px] h-[72px] rounded-full mb-3"
-            />
-          )}
-          <div className="flex flex-col items-center gap-1 text-foreground">
-            <p className="text-2xl font-normal leading-[133%]">
-              Connect to {appName}
-            </p>
-            <p className="text-base leading-[150%] text-muted-foreground">
-              This app wants to connect to your wallet
-            </p>
-          </div>
-        </div>
-
-        {/* Account Details Card */}
-        {/* <div className="flex-1 p-3.5 bg-secondary border border-border rounded-[6px]">
-          <div className="flex flex-col gap-2">
-            <div className="flex justify-between items-center">
-              <span className="text-xs font-bold text-foreground">Account</span>
-              <span className="text-sm font-medium text-foreground">
-                {accountName || 'Wallet'}
-              </span>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-xs font-bold text-foreground">Address</span>
-              <span className="text-sm font-mono font-medium text-foreground">
-                {formatAddress(walletAddress)}
-              </span>
-            </div>
-            {supportedChains && supportedChains.length > 0 && (
-              <div className="flex justify-between items-center">
-                <span className="text-xs font-bold text-foreground">Chains</span>
-                <span className="text-sm font-medium text-foreground">
-                  {supportedChains.length} {supportedChains.length === 1 ? 'chain' : 'chains'}
-                </span>
-              </div>
-            )}
-          </div>
-        </div> */}
-
-        {/* Permissions Section */}
-        {showPermissions && (
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center flex-row gap-2.5 p-3.5 border border-border rounded-[6px]">
-              <EyeIcon className="w-4 h-4 flex-shrink-0" />
-              <p className="text-foreground text-xs font-normal leading-[150%]">
-                Allow the app to see your addresses
-              </p>
-            </div>
-            <div className="flex items-center flex-row gap-2.5 p-3.5 border border-border rounded-[6px]">
-              <BadgeDollarIcon className="w-4 h-4 flex-shrink-0" />
-              <p className="text-foreground text-xs font-normal leading-[150%]">
-                Allow the app to propose transactions
-              </p>
-            </div>
-            <div className="flex items-center flex-row gap-2.5 p-3.5 border border-border rounded-[6px]">
-              <BadgeDollarIcon className="w-4 h-4 flex-shrink-0" />
-              <p className="text-foreground text-xs font-normal leading-[150%]">
-                The app cannot move funds without your permission
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* Network and URL Information */}
-        <div className="flex flex-row gap-4 border border-border rounded-[6px] p-2">
-          {/* Network Column */}
-          {chainName && (
-            <>
-              <div className="flex flex-col gap-1 flex-1">
-                <p className="text-xs font-bold text-foreground">Network</p>
-                <div className="flex flex-row items-center gap-2">
-                  {chainIcon && (
-                    <div className="w-6 h-6 min-w-4 flex items-center justify-center flex-shrink-0">
-                      {chainIcon}
-                    </div>
-                  )}
-                  <p className="text-sm font-normal text-foreground">
-                    {chainName}
-                  </p>
-                </div>
-              </div>
-              {/* Vertical Separator */}
-              <div className="w-[1px] bg-border min-h-[40px]"></div>
-            </>
-          )}
-          {/* URL Column */}
-          <div className="flex flex-col gap-1 flex-1">
-            <p className="text-xs font-bold text-foreground">URL</p>
-            <p className="text-sm font-normal text-foreground">
-              {formatOrigin(origin)}
-            </p>
-          </div>
-        </div>
-
-        {/* Action Buttons Section */}
-        <div className="flex mt-3 flex-shrink-0">
-          <div className="flex gap-2 w-full justify-between">
-            <Button
-              variant="outline"
-              onClick={onCancel}
-              disabled={isProcessing}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={onConnect}
-              disabled={isProcessing}
-              className="flex-1"
-            >
-              {isProcessing ? 'Connecting...' : 'Connect'}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </DefaultDialog>
-  )
-}
-
-export * from './types';

package/src/components/ConnectDialog/types.ts

@@ -1,34 +0,0 @@
-import { JSX } from "react";
-
-export interface ConnectDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-
-  // App information
-  appName: string;
-  appLogoUrl?: string;
-  origin: string;
-  timestamp: Date;
-
-  // User account information
-  accountName?: string;
-  walletAddress: string;
-
-  // Chain information
-  chainName?: string;
-  chainId?: number;
-  chainIcon?: JSX.Element;
-
-  // RPC configuration
-  mainnetRpcUrl: string;
-
-  // Actions
-  onConnect: () => Promise<void>;
-  onCancel: () => void;
-
-  // Whether to show the permission info messages (default: true)
-  showPermissions?: boolean;
-
-  // Status
-  isProcessing: boolean;
-}

package/src/components/DefaultDialog/index.tsx

@@ -1,99 +0,0 @@
-import { CloseIcon } from '../../icons';
-import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '../ui/dialog';
-import { FC, ReactNode } from 'react';
-
-export interface DefaultDialogProps {
-  open?: boolean;
-  handleClose?: () => void;
-  onOpenChange?: (open: boolean) => void;
-  children: ReactNode;
-  header?: ReactNode;
-  innerStyle?: React.CSSProperties;
-  trigger?: ReactNode;
-  fullScreen?: boolean;
-  contentStyle?: React.CSSProperties;
-}
-
-export const DefaultDialog: FC<DefaultDialogProps> = ({
-  onOpenChange,
-  trigger,
-  open,
-  handleClose,
-  children,
-  header,
-  fullScreen,
-  innerStyle = {},
-  contentStyle = {},
-}) => {
-  return (
-    <Dialog modal={true} open={open} onOpenChange={onOpenChange}>
-      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
-
-      <DialogContent
-        fullScreen={fullScreen}
-        onInteractOutside={(e) => {
-          // Only stop propagation for click/pointer events, NOT wheel events
-          // This allows scrolling to work inside the dialog
-          if (e.type !== 'wheel') {
-            e.stopPropagation();
-          }
-        }}
-        aria-describedby={undefined}
-        showCloseButton={false}
-        style={{
-          padding: 0,
-          transition: 'all 0.4 ease-in-out',
-          display: 'flex',
-          flexDirection: 'column',
-          borderRadius: fullScreen ? '0' : undefined,
-          boxSizing: 'content-box',
-          ...contentStyle,
-        }}
-      >
-        <DialogTitle style={{ display: 'none' }}></DialogTitle>
-
-        <div onWheel={(e) => e.nativeEvent.stopPropagation()} className={`flex p-2.5 ${fullScreen ? 'rounded-none' : 'rounded-3xl'} gap-5 flex-col md:max-h-[calc(100%-45px)] flex-1 box-border overflow-auto`}
-          style={{
-            ...innerStyle,
-          }}
-        >
-          <div className="flex flex-row justify-between">
-            {header}
-
-            <div
-              className="flex flex-col items-center justify-center w-[24px]">
-              {handleClose ? (
-                <CloseIcon
-                  style={{
-                    cursor: 'pointer',
-                  }}
-                  onClick={handleClose}
-                  width={24}
-                />
-              ) : (
-                <DialogClose
-                  style={{
-                    border: '0px',
-                    background: 'none',
-                    padding: 0,
-                    height: '24px',
-                    display: 'flex',
-                    placeContent: 'center',
-                  }}
-                >
-                  <CloseIcon
-                    style={{
-                      cursor: 'pointer',
-                    }}
-                    width={24}
-                  />
-                </DialogClose>
-              )}
-            </div>
-          </div>
-          {children}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};