@silentswap/ui-kit 0.0.41

package/src/components/Input.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from 'react';
+import type { InputHTMLAttributes } from 'react';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Visual variant of the input */
+    variant?: 'default' | 'digital' | 'amount';
+    /** Whether the input has an error */
+    error?: boolean;
+    /** Whether the input is loading */
+    loading?: boolean;
+    /** Optional label text */
+    label?: string;
+    /** Prefix text shown before input */
+    prefix?: string;
+}
+
+/**
+ * Simple input component with different variants
+ * Based on SilentSwap Form.svelte and Plate.svelte styles
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(({
+    variant = 'default',
+    error = false,
+    loading = false,
+    label,
+    prefix,
+    className = '',
+    ...props
+}, ref) => {
+    const baseClasses = 'w-full border-0 rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+
+    const variantClasses = {
+        default: 'px-3 py-2 text-base bg-black text-white',
+        digital: 'digital-input', // Uses CSS class from styles.css
+        amount: 'text-[28px] font-bold text-white px-3 py-1 bg-black rounded-t-lg rounded-b-none',
+    };
+
+    const errorClasses = error ? 'focus:ring-red-500' : 'focus:ring-[var(--color-yellow)]';
+    const loadingClasses = loading ? 'animate-[trill_350ms_linear_infinite] bg-[var(--color-gray-dark)]' : '';
+
+    const classes = `${baseClasses} ${variantClasses[variant]} ${errorClasses} ${loadingClasses} ${className}`.trim();
+
+    const inputElement = (
+        <div className="relative flex items-center">
+            {prefix && (
+                <span className="absolute left-3 text-gray-400 font-medium">
+                    {prefix}
+                </span>
+            )}
+            <input
+                ref={ref}
+                className={`${classes} ${prefix ? 'pl-8' : ''}`}
+                {...props}
+            />
+        </div>
+    );
+
+    if (label) {
+        return (
+            <div className="w-full">
+                <label className="block text-sm font-medium mb-1 text-gray-300">
+                    {label}
+                </label>
+                {inputElement}
+            </div>
+        );
+    }
+
+    return inputElement;
+});
+
+Input.displayName = 'Input';

package/src/components/PopularTokensArea.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { S_CAIP19_USDC_AVALANCHE } from '../constants';
+import { asset_get } from '../data';
+import { AssetTile } from './AssetTile';
+
+export interface PopularTokensAreaProps {
+  onTokenSelect?: (caip19: string) => void;
+  title?: string;
+  tokens?: string[];
+  className?: string;
+}
+
+export const PopularTokensArea: React.FC<PopularTokensAreaProps> = ({
+  onTokenSelect,
+  title = 'Popular Tokens',
+  tokens,
+  className = ''
+}) => {
+  const defaultTokens = [
+    'eip155:1/slip44:60',  // ETH on Ethereum
+    'eip155:1/erc20:0xdAC17F958D2ee523a2206206994597C13D831ec7',  // USDT on Ethereum
+    'eip155:1/erc20:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',  // USDC on Ethereum
+    'eip155:1/erc20:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',  // WETH on Ethereum
+    'eip155:1/erc20:0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599',  // WBTC on Ethereum
+
+    'eip155:56/slip44:714',  // BNB on BSC
+    'eip155:56/erc20:0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',  // WBNB on BSC
+
+    'eip155:8453/slip44:60',  // ETH on Base
+    'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',  // USDC on Base
+
+    'eip155:43114/slip44:9005',  // WAVAX on Avalanche
+    S_CAIP19_USDC_AVALANCHE,  // USDC on Avalanche
+
+    'eip155:137/slip44:966',  // WMATIC/WPOL on Polygon
+    'eip155:137/erc20:0xc2132D05D31c914a87C6611C10748AEb04B58e8F',  // USDT0 on Polygon
+    'eip155:137/erc20:0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',  // USDC on Polygon
+
+    'eip155:10/slip44:60',  // WETH on Optimism
+    'eip155:10/erc20:0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85',  // USDC on Optimism
+
+    'eip155:42161/slip44:60',  // WETH on Arbitrum
+    'eip155:42161/erc20:0xaf88d065e77c8cC2239327C5EDb3A432268e5831',  // USDC on Arbitrum
+  ];
+
+  const popularTokens = tokens || defaultTokens;
+
+  return (
+    <div className={`${className}`}>
+      <div className="font-orbitron text-lg font-bold text-white mb-3">
+        {title}
+      </div>
+
+      <div className="flex gap-2 overflow-x-auto pb-2">
+        {popularTokens.map((caip19) => {
+          const asset = asset_get(caip19);
+          if (!asset) return null;
+
+          return (
+            <div
+              key={caip19}
+              className="flex flex-col items-center gap-2 bg-dim-med rounded-lg p-2 cursor-pointer hover:bg-dim-light transition-colors min-w-fit"
+              onClick={() => onTokenSelect?.(caip19)}
+              role="button"
+              tabIndex={0}
+              aria-label={`Select ${asset.symbol}`}
+            >
+              <AssetTile caip19={caip19} size="small" />
+              <div className="text-text-dim text-xs text-center">
+                {asset.symbol?.toUpperCase()}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/ProgressBar.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+
+export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Progress value from 0 to 1 (0 = 0%, 1 = 100%) */
+    value: number;
+    /** Height of the progress bar in pixels */
+    height?: number;
+    /** Color of the progress fill */
+    color?: 'green' | 'yellow' | 'purple' | 'orange';
+    /** Whether to show the progress bar (animates height) */
+    show?: boolean;
+}
+
+/**
+ * Simple progress bar component
+ * Based on SilentSwap Plate.svelte progress styles
+ */
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+    value,
+    height = 6,
+    color = 'green',
+    show = true,
+    className = '',
+    style,
+    ...props
+}) => {
+    const colorClasses = {
+        green: 'bg-[var(--color-green)]',
+        yellow: 'bg-[var(--color-yellow)]',
+        purple: 'bg-[var(--color-purple)]',
+        orange: 'bg-[var(--color-orange)]',
+    };
+
+    // Clamp value between 0 and 1
+    const clampedValue = Math.max(0, Math.min(1, value));
+
+    const containerStyle: React.CSSProperties = {
+        height: show ? `${height}px` : '0px',
+        width: '100%',
+        backgroundColor: 'var(--color-gray-dark)',
+        transition: 'height 500ms linear',
+        overflow: 'hidden',
+        ...style,
+    };
+
+    const fillStyle: React.CSSProperties = {
+        width: `${clampedValue * 100}%`,
+        height: '100%',
+        transition: 'width 490ms linear',
+    };
+
+    return (
+        <div
+            className={className}
+            style={containerStyle}
+            role="progressbar"
+            aria-valuenow={clampedValue * 100}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            {...props}
+        >
+            <div className={colorClasses[color]} style={fillStyle} />
+        </div>
+    );
+};
+

package/src/components/Select.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import type { SelectHTMLAttributes, ReactNode } from 'react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(({
+  options,
+  placeholder,
+  className = '',
+  ...props
+}, ref) => {
+  const classes = `bg-black border-0 rounded-lg text-white px-3 py-2 cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-yellow focus:ring-offset-2 hover:bg-dim-dark ${className}`.trim();
+
+  return (
+    <select
+      ref={ref}
+      className={classes}
+      {...props}
+    >
+      {placeholder && (
+        <option value="" disabled>
+          {placeholder}
+        </option>
+      )}
+      {options.map((option) => (
+        <option
+          key={option.value}
+          value={option.value}
+          disabled={option.disabled}
+          className="bg-black text-text-bright"
+        >
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+});
+
+Select.displayName = 'Select';

package/src/components/Warning.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface WarningProps extends HTMLAttributes<HTMLDivElement> {
+    /** Warning content */
+    children: ReactNode;
+    /** Variant of the warning */
+    variant?: 'warning' | 'error' | 'info' | 'success';
+    /** Whether to show a dot indicator */
+    showDot?: boolean;
+}
+
+/**
+ * Simple warning/notice component
+ * Based on SilentSwap Plate.svelte input-notice styles
+ */
+export const Warning: React.FC<WarningProps> = ({
+    children,
+    variant = 'warning',
+    showDot = true,
+    className = '',
+    ...props
+}) => {
+    const baseClasses = 'text-xs bg-black/80 rounded px-2 py-1 flex items-center gap-1';
+
+    const variantClasses = {
+        warning: 'text-[#FED703]',
+        error: 'text-red-500',
+        info: 'text-blue-400',
+        success: 'text-[var(--color-green)]',
+    };
+
+    const dotColor = {
+        warning: '#FED703',
+        error: '#ef4444',
+        info: '#60a5fa',
+        success: 'var(--color-green)',
+    };
+
+    const classes = `${baseClasses} ${variantClasses[variant]} ${className}`.trim();
+
+    return (
+        <div className={classes} {...props}>
+            {showDot && (
+                <span
+                    className="inline-block w-[5px] h-[6px] rounded-full"
+                    style={{ backgroundColor: dotColor[variant] }}
+                />
+            )}
+            <span>{children}</span>
+        </div>
+    );
+};
+

package/src/constants.ts

@@ -0,0 +1,5 @@
+// CAIP-19 identifier for USDC on Avalanche
+export const S_CAIP19_USDC_AVALANCHE = 'eip155:43114/erc20:0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E';
+
+// Minimum input USD value
+export const X_MINIMUM_INPUT_USD = 9.95;

package/src/data.ts

@@ -0,0 +1,19 @@
+import type { Asset, WeakCaip19, WeakCaip2 } from './types';
+
+// Global assets and chains stores
+let H_ASSETS: Record<WeakCaip19, Asset> = {};
+let H_CHAINS: Record<WeakCaip2, any> = {};
+
+// Asset data loading function - needs to be called by consumer
+export function loadAssets(assetData: { assets: Record<WeakCaip19, Asset>; chains: Record<WeakCaip2, any> }) {
+  H_ASSETS = assetData.assets;
+  H_CHAINS = assetData.chains;
+}
+
+export function asset_get(si_caip19: string): Asset | undefined {
+  return H_ASSETS[si_caip19 as WeakCaip19];
+}
+
+export function chain_get(si_caip2: string): any | undefined {
+  return H_CHAINS[si_caip2 as WeakCaip2];
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+// Components
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Select } from './components/Select';
+export { Card } from './components/Card';
+export { Warning } from './components/Warning';
+export { ProgressBar } from './components/ProgressBar';
+export { AssetTile } from './components/AssetTile';
+export { PopularTokensArea } from './components/PopularTokensArea';
+
+// Note: Import styles.css in your app for Tailwind styles
+
+// Types
+export type { Asset, ContactId } from './types';
+export type { ButtonProps } from './components/Button';
+export type { InputProps } from './components/Input';
+export type { SelectProps, SelectOption } from './components/Select';
+export type { CardProps } from './components/Card';
+export type { WarningProps } from './components/Warning';
+export type { ProgressBarProps } from './components/ProgressBar';
+
+// Constants
+export { S_CAIP19_USDC_AVALANCHE, X_MINIMUM_INPUT_USD } from './constants';
+
+// Data utilities
+export { loadAssets } from './data';