@lombard.finance/sdk 4.0.0 → 4.1.0

package/src/stories/components/Badge.tsx

@@ -1,27 +0,0 @@
-import { type ReactNode } from 'react';
-
-interface BadgeProps {
-  children: ReactNode;
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'danger'
-    | 'warning'
-    | 'info'
-    | 'light'
-    | 'dark';
-  className?: string;
-}
-
-/**
- * Reusable badge component for displaying labels and tags
- * Supports Bootstrap color variants
- */
-export function Badge({
-  children,
-  variant = 'secondary',
-  className = '',
-}: BadgeProps) {
-  return <span className={`badge bg-${variant} ${className}`}>{children}</span>;
-}

package/src/stories/components/Button/Button.css

@@ -1,10 +0,0 @@
-.story-btn {
-  border: 1px solid var(--bs-gray-900);
-  background: var(--bs-gray-200);
-  color: var(--bs-gray-900);
-}
-
-.story-btn:hover {
-  background: var(--bs-gray-700);
-  color: var(--bs-gray-100);
-}

package/src/stories/components/Button/Button.tsx

@@ -1,52 +0,0 @@
-import './Button.css';
-
-import React from 'react';
-
-import { Spinner } from '../Spinner';
-
-export interface ButtonProps {
-  disabled?: boolean;
-  children?: React.ReactNode;
-  actionName?: string;
-  primary?: boolean;
-  size?: 'small' | 'medium' | 'large';
-  isLoading?: boolean;
-  onClick?: () => void;
-}
-
-/**
- * Execute action button
- */
-export const Button = ({
-  primary: _primary = true,
-  size = 'medium',
-  actionName,
-  children,
-  isLoading,
-  ...props
-}: ButtonProps) => {
-  const label = actionName ? (
-    <span>
-      Execute: <span style={{ fontFamily: 'monospace' }}>{actionName}</span>
-    </span>
-  ) : (
-    children
-  );
-
-  return (
-    <button
-      type="button"
-      className={[
-        'btn',
-        size === 'small' ? 'btn-sm' : '',
-        size === 'large' ? 'btn-lg' : '',
-        'story-btn',
-      ].join(' ')}
-      {...props}
-    >
-      {label}
-
-      {isLoading && <Spinner color="text-primary" className="ms-2" />}
-    </button>
-  );
-};

package/src/stories/components/Button/index.ts

@@ -1 +0,0 @@
-export * from './Button';

package/src/stories/components/Card.tsx

@@ -1,18 +0,0 @@
-import { type ReactNode } from 'react';
-
-interface CardProps {
-  children: ReactNode;
-  className?: string;
-}
-
-/**
- * Reusable card component for registry explorers
- * Provides consistent styling for content containers
- */
-export function Card({ children, className = '' }: CardProps) {
-  return (
-    <div className={`card ${className}`}>
-      <div className="card-body">{children}</div>
-    </div>
-  );
-}

package/src/stories/components/CodeBlock/CodeBlock.tsx

@@ -1,27 +0,0 @@
-import './CodeBlockStyles.css';
-
-import { JSX } from 'react';
-
-interface ICodeBlockProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  text?: any;
-  withFormatting?: boolean;
-}
-
-export function CodeBlock({
-  text,
-  withFormatting = true,
-}: ICodeBlockProps): JSX.Element | null {
-  const formattedCode =
-    text && withFormatting ? JSON.stringify(text, null, 2) : text;
-
-  if (text === undefined || text === null) {
-    return null;
-  }
-
-  return (
-    <pre className="card my-3 code-block--max-height">
-      <code className="card-body">{formattedCode}</code>
-    </pre>
-  );
-}

package/src/stories/components/CodeBlock/CodeBlockStyles.css

@@ -1,3 +0,0 @@
-.code-block--max-height {
-  max-height: 500px;
-}

package/src/stories/components/CodeBlock/index.ts

@@ -1 +0,0 @@
-export * from './CodeBlock';

package/src/stories/components/ConnectButton/connect-button.tsx

@@ -1,248 +0,0 @@
-import { avalanche, avalancheFuji } from '@wagmi/core/chains';
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useSwitchChain } from 'wagmi';
-import { base, bsc, bscTestnet, holesky, mainnet, sepolia } from 'wagmi/chains';
-
-import { useConnection } from '../../hooks/useConnection';
-import { Spinner } from '../Spinner';
-
-export type ConnectButtonProps = {
-  label?: string;
-};
-
-// Available networks for switching
-const AVAILABLE_NETWORKS = [
-  { chain: mainnet, name: 'Ethereum' },
-  { chain: base, name: 'Base' },
-  { chain: bsc, name: 'BSC' },
-  { chain: avalanche, name: 'Avalanche' },
-  { chain: holesky, name: 'Holesky' },
-  { chain: sepolia, name: 'Sepolia' },
-  { chain: bscTestnet, name: 'BSC Testnet' },
-  { chain: avalancheFuji, name: 'Avalanche Fuji' },
-] as const;
-
-export function ConnectButton({ label }: ConnectButtonProps) {
-  const { account, connect, disconnect } = useConnection();
-  const { switchChain, isPending: isSwitchingNetwork } = useSwitchChain();
-  const [showNetworkDropdown, setShowNetworkDropdown] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
-
-  // Update dropdown position when button position changes
-  useEffect(() => {
-    if (showNetworkDropdown && buttonRef.current) {
-      const updatePosition = () => {
-        const rect = buttonRef.current?.getBoundingClientRect();
-        if (rect) {
-          setDropdownPosition({
-            top: rect.bottom + 4,
-            left: rect.right - 150, // Align to right (dropdown width = 150px)
-          });
-        }
-      };
-
-      updatePosition();
-      window.addEventListener('scroll', updatePosition, true);
-      window.addEventListener('resize', updatePosition);
-
-      return () => {
-        window.removeEventListener('scroll', updatePosition, true);
-        window.removeEventListener('resize', updatePosition);
-      };
-    }
-  }, [showNetworkDropdown]);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setShowNetworkDropdown(false);
-      }
-    }
-
-    if (showNetworkDropdown) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [showNetworkDropdown]);
-
-  if (account.status === 'connected') {
-    return (
-      <div
-        style={{
-          display: 'inline-flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: '5px',
-          border: '1px solid var(--bs-gray-900)',
-          borderRadius: '5px',
-          padding: '5px',
-          height: '38px',
-        }}
-      >
-        <span
-          style={{
-            background: 'var(--bs-green)',
-            color: '#ffffff',
-            borderRadius: '5px',
-            padding: '2px',
-            fontSize: '0.8em',
-          }}
-        >
-          {account.status}
-        </span>
-
-        <span
-          style={{
-            background: 'var(--bs-gray-100)',
-            borderRadius: '5px',
-            padding: '2px',
-            fontSize: '0.8em',
-          }}
-        >
-          {account.address}
-        </span>
-
-        <button
-          ref={buttonRef}
-          type="button"
-          style={{
-            background: account.chain ? 'var(--bs-gray-200)' : 'var(--bs-red)',
-            color: account.chain ? 'var(--bs-black)' : 'var(--bs-white)',
-            borderRadius: '5px',
-            padding: '2px 6px',
-            fontSize: '0.8em',
-            border: 'none',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '4px',
-          }}
-          onClick={() => {
-            setShowNetworkDropdown(!showNetworkDropdown);
-          }}
-          disabled={isSwitchingNetwork}
-        >
-          {account.chain?.name || account.chainId}
-          <span style={{ fontSize: '0.7em' }}>▼</span>
-        </button>
-
-        {showNetworkDropdown &&
-          createPortal(
-            <div
-              ref={dropdownRef}
-              style={{
-                position: 'fixed',
-                top: `${dropdownPosition.top}px`,
-                left: `${dropdownPosition.left}px`,
-                background: 'white',
-                border: '1px solid var(--bs-gray-300)',
-                borderRadius: '5px',
-                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-                zIndex: 10000,
-                minWidth: '150px',
-                maxHeight: '300px',
-                overflowY: 'auto',
-              }}
-            >
-              {AVAILABLE_NETWORKS.map(network => {
-                const isCurrentNetwork = account.chainId === network.chain.id;
-                return (
-                  <button
-                    key={network.chain.id}
-                    type="button"
-                    style={{
-                      display: 'block',
-                      width: '100%',
-                      padding: '8px 12px',
-                      border: 'none',
-                      background: isCurrentNetwork
-                        ? 'var(--bs-gray-100)'
-                        : 'transparent',
-                      textAlign: 'left',
-                      fontSize: '0.8em',
-                      cursor: isCurrentNetwork ? 'default' : 'pointer',
-                      fontWeight: isCurrentNetwork ? 'bold' : 'normal',
-                    }}
-                    onClick={() => {
-                      if (!isCurrentNetwork) {
-                        switchChain({ chainId: network.chain.id });
-                        setShowNetworkDropdown(false);
-                      }
-                    }}
-                    disabled={isCurrentNetwork || isSwitchingNetwork}
-                    onMouseEnter={e => {
-                      if (!isCurrentNetwork) {
-                        e.currentTarget.style.background = 'var(--bs-gray-100)';
-                      }
-                    }}
-                    onMouseLeave={e => {
-                      if (!isCurrentNetwork) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    {isCurrentNetwork && '✓ '}
-                    {network.name}
-                  </button>
-                );
-              })}
-            </div>,
-            document.body,
-          )}
-
-        <button
-          type="button"
-          style={{
-            background: 'var(--bs-danger)',
-            color: 'var(--bs-white)',
-            border: '0',
-            borderRadius: '5px',
-            padding: '2px',
-            fontSize: '0.8em',
-            cursor: 'pointer',
-          }}
-          onClick={() => {
-            disconnect();
-          }}
-        >
-          Disconnect
-        </button>
-      </div>
-    );
-  }
-
-  if (account.status === 'disconnected') {
-    return (
-      <button
-        className="btn"
-        style={{
-          border: '1px solid var(--bs-gray-900)',
-        }}
-        type="button"
-        onClick={() => {
-          connect();
-        }}
-      >
-        {label || 'Connect wallet'}
-      </button>
-    );
-  }
-
-  return (
-    <button type="button" disabled className="btn">
-      Awaiting wallet interaction{' '}
-      <Spinner color="text-primary" className="ms-2" />
-    </button>
-  );
-}

package/src/stories/components/ConnectButton/index.ts

@@ -1 +0,0 @@
-export { ConnectButton, type ConnectButtonProps } from './connect-button';

package/src/stories/components/JsonPreview.tsx

@@ -1,84 +0,0 @@
-/**
- * JsonPreview Component
- *
- * A collapsible JSON viewer with syntax highlighting for developer tools.
- * Used in SDK playground stories to display workflow state, snapshots, and results.
- */
-
-import { useState } from 'react';
-
-export interface JsonPreviewProps {
-  /** Title displayed in the header */
-  title: string;
-  /** JSON data to display */
-  data: unknown;
-  /** Whether the preview is expanded by default */
-  defaultExpanded?: boolean;
-  /** Optional badge text to display next to the title */
-  badge?: string;
-  /** Badge variant for styling */
-  badgeVariant?:
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'danger'
-    | 'warning'
-    | 'info';
-}
-
-/**
- * JsonPreview component for displaying JSON data with expand/collapse
- */
-export function JsonPreview({
-  title,
-  data,
-  defaultExpanded = true,
-  badge,
-  badgeVariant = 'secondary',
-}: JsonPreviewProps) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-
-  return (
-    <div className="border-top border-bottom">
-      {/* Header */}
-      <button
-        type="button"
-        className="d-flex justify-content-between align-items-center px-3 py-2 bg-secondary bg-opacity-10 w-100 border-0 text-start"
-        onClick={() => setIsExpanded(!isExpanded)}
-        aria-expanded={isExpanded ? 'true' : 'false'}
-        aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${title}`}
-      >
-        <div className="d-flex align-items-center gap-2">
-          <small className="text-uppercase text-muted fw-bold font-monospace">
-            {title}
-          </small>
-          {badge && (
-            <span className={`badge bg-${badgeVariant} font-monospace small`}>
-              {badge}
-            </span>
-          )}
-        </div>
-        <span className="text-muted">{isExpanded ? '▼' : '▶'}</span>
-      </button>
-
-      {/* Content */}
-      {isExpanded && (
-        <div className="p-2 bg-dark overflow-auto json-preview-content">
-          <pre className="text-light font-monospace small m-0 json-preview-pre">
-            {JSON.stringify(data, null, 2)}
-          </pre>
-        </div>
-      )}
-
-      {/* Inline styles for specific constraints */}
-      <style>{`
-        .json-preview-content {
-          max-height: 300px;
-        }
-        .json-preview-pre {
-          font-size: 0.7rem;
-        }
-      `}</style>
-    </div>
-  );
-}

package/src/stories/components/Spinner/Spinner.tsx

@@ -1,27 +0,0 @@
-import { JSX } from 'react';
-
-interface ISpinnerProps {
-  color?: 'text-primary' | 'text-light';
-  size?: 'sm' | 'md';
-  className?: string;
-}
-
-export function Spinner({
-  color = 'text-primary',
-  size = 'sm',
-  className,
-}: ISpinnerProps): JSX.Element {
-  return (
-    <div
-      className={[
-        'spinner-border',
-        color,
-        size === 'sm' ? 'spinner-border-sm' : '',
-        className || '',
-      ].join(' ')}
-      role="status"
-    >
-      <span className="visually-hidden">Loading...</span>
-    </div>
-  );
-}

package/src/stories/components/Spinner/index.ts

@@ -1 +0,0 @@
-export * from './Spinner';

package/src/stories/components/StatsCard.tsx

@@ -1,30 +0,0 @@
-interface StatsCardProps {
-  title: string;
-  value: number | string;
-  subtitle?: string;
-  variant?: 'default' | 'success' | 'warning' | 'info' | 'danger';
-}
-
-/**
- * Reusable statistics card component for displaying metrics
- * Shows a title, large value, and optional subtitle with color variants
- */
-export function StatsCard({
-  title,
-  value,
-  subtitle,
-  variant = 'default',
-}: StatsCardProps) {
-  const borderClass = variant !== 'default' ? `border-${variant}` : '';
-  const textClass = variant !== 'default' ? `text-${variant}` : '';
-
-  return (
-    <div className={`card ${borderClass}`}>
-      <div className="card-body">
-        <h6 className="card-subtitle mb-2 text-muted">{title}</h6>
-        <h3 className={`card-title ${textClass}`}>{value}</h3>
-        {subtitle && <small className="text-muted">{subtitle}</small>}
-      </div>
-    </div>
-  );
-}

package/src/stories/components/StatusIndicator.tsx

@@ -1,37 +0,0 @@
-/**
- * StatusIndicator component for displaying deployment and feature status
- * Shows a colored dot indicator with optional label
- */
-interface StatusIndicatorProps {
-  active: boolean;
-  activeLabel?: string;
-  inactiveLabel?: string;
-  showLabel?: boolean;
-}
-
-export function StatusIndicator({
-  active,
-  activeLabel = 'Active',
-  inactiveLabel = 'Inactive',
-  showLabel = true,
-}: StatusIndicatorProps) {
-  const backgroundColor = active ? '#198754' : '#dc3545';
-
-  return (
-    <div className="d-flex align-items-center gap-2">
-      <span
-        className="rounded-circle d-inline-block"
-        style={{
-          width: '12px',
-          height: '12px',
-          backgroundColor,
-        }}
-      />
-      {showLabel && (
-        <span className="fw-semibold">
-          {active ? activeLabel : inactiveLabel}
-        </span>
-      )}
-    </div>
-  );
-}

package/src/stories/components/TreeNode.tsx

@@ -1,47 +0,0 @@
-import { type ReactNode } from 'react';
-
-interface TreeNodeProps {
-  label: ReactNode;
-  isExpanded: boolean;
-  onToggle: () => void;
-  badge?: ReactNode;
-  level?: number;
-  children?: ReactNode;
-}
-
-/**
- * Reusable tree node component for registry explorers
- */
-export function TreeNode({
-  label,
-  isExpanded,
-  onToggle,
-  badge,
-  level = 0,
-  children,
-}: TreeNodeProps) {
-  const bgColors = ['transparent', '#f8f9fa', '#e9ecef', '#dee2e6'];
-  const backgroundColor = bgColors[level] || bgColors[bgColors.length - 1];
-  const marginLeft = level > 0 ? '1rem' : '0';
-
-  return (
-    <div className="mb-2" style={{ marginLeft }}>
-      <button
-        type="button"
-        className="btn btn-link text-start w-100 text-decoration-none p-2"
-        style={{
-          border: '1px solid #dee2e6',
-          borderRadius: '4px',
-          backgroundColor,
-        }}
-        onClick={onToggle}
-      >
-        <span className="me-2">{isExpanded ? '▼' : '▶'}</span>
-        <strong>{label}</strong>
-        {badge && <span className="ms-2">{badge}</span>}
-      </button>
-
-      {isExpanded && children && <div className="mt-2">{children}</div>}
-    </div>
-  );
-}