@jaw.id/ui 0.0.3 → 0.0.5

package/src/react/index.ts

@@ -1,2 +0,0 @@
-// React integration for @jaw.id/ui
-export { ReactUIHandler } from './ReactUIHandler';

package/src/styles.css

@@ -1,210 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    :root {
-        --background: oklch(1 0 0);
-        --foreground: oklch(0.145 0 0);
-        --card: oklch(1 0 0);
-        --card-foreground: oklch(0.145 0 0);
-        --popover: oklch(1 0 0);
-        --popover-foreground: oklch(0.145 0 0);
-        --primary: oklch(0.205 0 0);
-        --primary-foreground: oklch(0.985 0 0);
-        --secondary: oklch(0.97 0 0);
-        --secondary-foreground: oklch(0.205 0 0);
-        --muted: oklch(0.97 0 0);
-        --muted-foreground: oklch(0.556 0 0);
-        --accent: oklch(0.97 0 0);
-        --accent-foreground: oklch(0.205 0 0);
-        --destructive: oklch(0.577 0.245 27.325);
-        --destructive-foreground: oklch(0.577 0.245 27.325);
-        --border: oklch(0.922 0 0);
-        --input: oklch(0.922 0 0);
-        --ring: oklch(0.708 0 0);
-        --chart-1: oklch(0.646 0.222 41.116);
-        --chart-2: oklch(0.6 0.118 184.704);
-        --chart-3: oklch(0.398 0.07 227.392);
-        --chart-4: oklch(0.828 0.189 84.429);
-        --chart-5: oklch(0.769 0.188 70.08);
-        --radius: 0.625rem;
-        --sidebar-background: #FAFAFA;
-        --sidebar-foreground: 240 5.3% 26.1%;
-        --sidebar-primary: 240 5.9% 10%;
-        --sidebar-primary-foreground: 0 0% 98%;
-        --sidebar-accent: 240 4.8% 95.9%;
-        --sidebar-accent-foreground: 240 5.9% 10%;
-        --sidebar-border: #E5E7EB;
-        --sidebar-ring: #A1A1AA;
-        --font-inter: 'Inter', sans-serif;
-        /* Dynamic viewport height variables for mobile Safari compatibility */
-        --vh: 1vh; /* Fallback value, will be updated by JavaScript */
-        --vh-mobile: 1vh; /* Mobile-specific viewport height with safety margin */
-      }
-       
-      .dark {
-        --background: oklch(0.145 0 0);
-        --foreground: oklch(0.985 0 0);
-        --card: oklch(0.145 0 0);
-        --card-foreground: oklch(0.985 0 0);
-        --popover: oklch(0.145 0 0);
-        --popover-foreground: oklch(0.985 0 0);
-        --primary: oklch(0.985 0 0);
-        --primary-foreground: oklch(0.205 0 0);
-        --secondary: oklch(0.269 0 0);
-        --secondary-foreground: oklch(0.985 0 0);
-        --muted: oklch(0.269 0 0);
-        --muted-foreground: oklch(0.708 0 0);
-        --accent: oklch(0.269 0 0);
-        --accent-foreground: oklch(0.985 0 0);
-        --destructive: oklch(0.396 0.141 25.723);
-        --destructive-foreground: oklch(0.637 0.237 25.331);
-        --border: oklch(0.269 0 0);
-        --input: oklch(0.269 0 0);
-        --ring: oklch(0.439 0 0);
-        --chart-1: oklch(0.488 0.243 264.376);
-        --chart-2: oklch(0.696 0.17 162.48);
-        --chart-3: oklch(0.769 0.188 70.08);
-        --chart-4: oklch(0.627 0.265 303.9);
-        --chart-5: oklch(0.645 0.246 16.439);
-        --sidebar-background: #111111;
-        --sidebar-foreground: 240 4.8% 95.9%;
-        --sidebar-primary: 0 0% 98%;
-        --sidebar-primary-foreground: 240 5.9% 10%;
-        --sidebar-accent: 240 3.7% 15.9%;
-        --sidebar-accent-foreground: 240 4.8% 95.9%;
-        --sidebar-border: #E5E7EB;
-        --sidebar-ring: #A1A1AA;
-        --font-inter: 'Inter', sans-serif;
-      }
-    
-}
-
-@theme inline {
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-background: var(--sidebar-background);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
-    --font-inter: 'Inter', sans-serif;
-  }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-
-@layer utilities {
-    /* Mobile-safe viewport height utilities */
-    .h-screen-safe {
-      height: 100vh;
-      height: calc(var(--vh, 1vh) * 100);
-    }
-  
-    .h-screen-mobile-safe {
-      height: 100vh;
-      height: calc(var(--vh-mobile, 1vh) * 100);
-    }
-  
-    .min-h-screen-safe {
-      min-height: 100vh;
-      min-height: calc(var(--vh, 1vh) * 100);
-    }
-  
-    .max-h-screen-safe {
-      max-height: 100vh;
-      max-height: calc(var(--vh, 1vh) * 100);
-    }
-  }
-  
-  
-  /* SliderInput Styles */
-  .sliderInput {
-    width: 100%;
-    height: 0.5rem;
-    background-color: #bfdbfe;
-    border-radius: 0.5rem;
-    appearance: none;
-    cursor: pointer;
-  }
-  
-  .sliderInput:focus {
-    outline: none;
-  }
-  
-  /* Slider Thumb Styling */
-  .sliderInput::-webkit-slider-thumb {
-    appearance: none;
-    width: 1rem;
-    height: 1rem;
-    background-color: #2563eb;
-    border-radius: 50%;
-    cursor: pointer;
-    margin-top: -0.25rem;
-  }
-  
-  .sliderInput::-moz-range-thumb {
-    width: 1rem;
-    height: 1rem;
-    background-color: #2563eb;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-  
-  .sliderInput::-ms-thumb {
-    width: 1rem;
-    height: 1rem;
-    background-color: #2563eb;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-  
-  .sliderInput::-webkit-slider-runnable-track {
-    height: 0.5rem;
-    background: transparent;
-    border-radius: 0.5rem;
-  }
-  
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }

package/src/utils/formatAddress.ts

@@ -1,24 +0,0 @@
-/**
- * Truncates an Ethereum address for display
- * Shows first 6 characters + ... + last 4 characters
- *
- * @example
- * formatAddress('0x1234567890abcdef1234567890abcdef12345678')
- * // Returns: '0x1234...5678'
- */
-export const formatAddress = (address: string): string => {
-  if (!address || address.length < 10) return address;
-  return `${address.slice(0, 6)}...${address.slice(-4)}`;
-};
-
-/**
- * Returns the display string for an address - either the resolved name or formatted address
- *
- * @param resolvedName - The resolved ENS/subname (if any)
- * @param address - The raw Ethereum address
- * @returns The resolved name if available, otherwise the formatted address
- */
-export const getDisplayAddress = (resolvedName: string | null | undefined, address: string): string => {
-  if (resolvedName) return resolvedName;
-  return formatAddress(address);
-};

package/src/utils/index.ts

@@ -1,4 +0,0 @@
-export * from './justaNameInstance';
-export * from './tokenPrice';
-export * from './formatAddress';
-export * from './tokenBalance';

package/src/utils/justaNameInstance.ts

@@ -1,25 +0,0 @@
-import { JustaName } from '@justaname.id/sdk';
-
-let justaNameInstance: ReturnType<typeof JustaName.init> | null = null;
-let currentProviderUrl: string | null = null;
-
-/**
- * Get or create the singleton JustaName SDK instance
- * @param providerUrl - The Ethereum mainnet RPC URL for ENS resolution
- */
-export function getJustaNameInstance(providerUrl: string) {
-  // Re-initialize if providerUrl changes (supports different configurations)
-  if (!justaNameInstance || currentProviderUrl !== providerUrl) {
-    currentProviderUrl = providerUrl;
-    justaNameInstance = JustaName.init({
-      networks: [
-        {
-          chainId: 1,
-          providerUrl
-        }
-      ]
-    });
-  }
-  return justaNameInstance;
-}
-

package/src/utils/tokenBalance.ts

@@ -1,41 +0,0 @@
-import { createPublicClient, http, erc20Abi, Address } from 'viem';
-
-// Common native token addresses used by various protocols
-const NATIVE_TOKEN_ADDRESSES = [
-  '0x0000000000000000000000000000000000000000', // Zero address
-  '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', // Common ERC-20 convention for native
-];
-
-/**
- * Checks if a token address represents the native token (ETH)
- */
-export function isNativeToken(tokenAddress: string): boolean {
-  return NATIVE_TOKEN_ADDRESSES.includes(tokenAddress.toLowerCase());
-}
-
-/**
- * Fetches the balance of a token for a given wallet address.
- * Supports both native ETH (address = 0x0...0 or 0xeee...eee) and ERC-20 tokens.
- */
-export async function fetchTokenBalance(
-  tokenAddress: string,
-  walletAddress: string,
-  rpcUrl: string
-): Promise<bigint> {
-  const client = createPublicClient({
-    transport: http(rpcUrl),
-  });
-
-  // Native token (ETH) - check common native addresses
-  if (isNativeToken(tokenAddress)) {
-    return client.getBalance({ address: walletAddress as Address });
-  }
-
-  // ERC-20 token
-  return client.readContract({
-    address: tokenAddress as Address,
-    abi: erc20Abi,
-    functionName: 'balanceOf',
-    args: [walletAddress as Address],
-  });
-}

package/src/utils/tokenPrice.ts

@@ -1,58 +0,0 @@
-// ============================================================================
-// Token Price Fetching (using CryptoCompare API)
-// ============================================================================
-
-// Price cache with TTL per symbol
-const tokenPriceCache: Map<string, { price: number; timestamp: number }> = new Map();
-const PRICE_CACHE_TTL = 5 * 60 * 1000; // 5 minutes
-
-/**
- * Fetches the current price in USD for a token by its symbol from CryptoCompare API
- * Results are cached for 5 minutes per symbol to reduce API calls
- * @param symbol - The token symbol (ETH, AVAX, BNB, USDC, etc.)
- * @returns Promise<number> - The token price in USD, or 0 if fetch fails
- */
-export async function fetchTokenPrice(symbol: string): Promise<number> {
-  if (!symbol) return 0;
-
-  // Normalize symbol (remove special characters like ₮)
-  const normalizedSymbol = symbol.replace(/[₮]/g, 'T').toUpperCase();
-
-  const cached = tokenPriceCache.get(normalizedSymbol);
-  if (cached && Date.now() - cached.timestamp < PRICE_CACHE_TTL) {
-    return cached.price;
-  }
-
-  try {
-    const response = await fetch(
-      `https://min-api.cryptocompare.com/data/price?fsym=${normalizedSymbol}&tsyms=USD`
-    );
-
-    if (!response.ok) {
-      throw new Error(`CryptoCompare API error: ${response.status}`);
-    }
-
-    const data = await response.json();
-
-    // CryptoCompare returns { "USD": price } or { "Response": "Error", ... }
-    if (data.Response === 'Error') {
-      console.warn(`CryptoCompare error for ${normalizedSymbol}:`, data.Message);
-      return cached?.price ?? 0;
-    }
-
-    const price = data.USD ?? 0;
-
-    tokenPriceCache.set(normalizedSymbol, { price, timestamp: Date.now() });
-    return price;
-  } catch (error) {
-    console.warn(`Failed to fetch ${normalizedSymbol} price:`, error);
-    return cached?.price ?? 0;
-  }
-}
-
-/**
- * Clears all token price caches (useful for testing or forcing refresh)
- */
-export function clearTokenPriceCache(): void {
-  tokenPriceCache.clear();
-}

package/tailwind.config.js

@@ -1,130 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    darkMode: ["class"],
-    content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  // Disable preflight to prevent global CSS resets in consuming apps
-  corePlugins: {
-    preflight: false,
-  },
-  // Safelist ensures all Tailwind classes used by components are included
-  safelist: [
-    // Color variants for all semantic colors
-    {
-      pattern: /^(bg|text|border|ring)-(background|foreground|card|popover|primary|secondary|muted|accent|destructive|input|border|ring)/,
-      variants: ['hover', 'focus', 'active', 'dark'],
-    },
-    // Common utilities used in dialogs
-    {
-      pattern: /^(rounded|shadow|opacity|z)-/,
-      variants: ['hover', 'focus'],
-    },
-    // Layout and positioning
-    {
-      pattern: /^(fixed|absolute|relative|inset|top|bottom|left|right)-/,
-    },
-    // Spacing
-    {
-      pattern: /^(p|m|gap|space)-(0|1|2|3|4|5|6|8|10|12|16|20|24)/,
-    },
-    // Flexbox and Grid
-    {
-      pattern: /^(flex|grid|items|justify|content)-.*/,
-      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
-    },
-    // Animation classes from tailwindcss-animate
-    'animate-in',
-    'animate-out',
-    'fade-in-0',
-    'fade-out-0',
-    'zoom-in-95',
-    'zoom-out-95',
-    'slide-in-from-left-1/2',
-    'slide-in-from-top-1/2',
-    'slide-out-to-left-1/2',
-    'slide-out-to-top-1/2',
-    // Common z-index values
-    'z-50',
-    'z-40',
-    'z-10',
-    // Radix UI data attributes
-    '[&[data-state=open]]',
-    '[&[data-state=closed]]',
-  ],
-  theme: {
-  	extend: {
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'var(--background)',
-  			foreground: 'var(--foreground)',
-  			card: {
-  				DEFAULT: 'var(--card)',
-  				foreground: 'var(--card-foreground)'
-  			},
-  			popover: {
-  				DEFAULT: 'var(--popover)',
-  				foreground: 'var(--popover-foreground)'
-  			},
-  			primary: {
-  				DEFAULT: 'var(--primary)',
-  				foreground: 'var(--primary-foreground)'
-  			},
-  			secondary: {
-  				DEFAULT: 'var(--secondary)',
-  				foreground: 'var(--secondary-foreground)'
-  			},
-  			muted: {
-  				DEFAULT: 'var(--muted)',
-  				foreground: 'var(--muted-foreground)'
-  			},
-  			accent: {
-  				DEFAULT: 'var(--accent)',
-  				foreground: 'var(--accent-foreground)'
-  			},
-  			destructive: {
-  				DEFAULT: 'var(--destructive)',
-  				foreground: 'var(--destructive-foreground)'
-  			},
-  			border: 'var(--border)',
-  			input: 'var(--input)',
-  			ring: 'var(--ring)',
-  			chart: {
-  				'1': 'var(--chart-1)',
-  				'2': 'var(--chart-2)',
-  				'3': 'var(--chart-3)',
-  				'4': 'var(--chart-4)',
-  				'5': 'var(--chart-5)'
-  			}
-  		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
-  },
-  plugins: [require("tailwindcss-animate")],
-}
-

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "../core"
-    },
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json",
-    "compilerOptions": {
-      "baseUrl": ".",
-      "paths": {
-        "@/*": ["./src/*"]
-      }
-    }
-}

package/tsconfig.lib.json

@@ -1,43 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "vite/client"
-    ],
-    "rootDir": "src",
-    "jsx": "react-jsx",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
-  },
-  "exclude": [
-    "out-tsc",
-    "dist",
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx"
-  ],
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx"
-,
-"../../apps/keys-jaw-id/src/utils/constants.ts"
-],
-"references": [
-{
-  "path": "../core/tsconfig.lib.json"
-}
-]
-}

package/vite.config.ts

@@ -1,45 +0,0 @@
-/// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { libInjectCss } from 'vite-plugin-lib-inject-css';
-import dts from 'vite-plugin-dts';
-import * as path from 'path';
-
-export default defineConfig(() => ({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/packages/ui',
-  plugins: [react(), libInjectCss(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    outDir: './dist',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    cssCodeSplit: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: '@jaw.id/ui',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ['es' as const]
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime']
-    },
-  },
-}));