keynesol-shared 1.0.0

package/dist/utils/toastService.js

@@ -0,0 +1,139 @@
+/**
+ * Toast Notification Service
+ * Centralized toast notification system using react-hot-toast
+ * Requirements: 4.2
+ */
+import toast from 'react-hot-toast';
+import { errorHandler } from './errorHandler';
+class ToastService {
+    constructor() {
+        this.defaultDuration = 5000;
+        this.defaultPosition = 'top-right';
+    }
+    /**
+     * Show success toast
+     */
+    success(message, options) {
+        return toast.success(message, {
+            duration: (options === null || options === void 0 ? void 0 : options.duration) || this.defaultDuration,
+            position: (options === null || options === void 0 ? void 0 : options.position) || this.defaultPosition,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+            style: {
+                background: 'var(--color-surface)',
+                color: 'var(--color-text)',
+                border: '1px solid var(--color-success)',
+                borderRadius: 'var(--border-radius-md)',
+            },
+        });
+    }
+    /**
+     * Show error toast
+     */
+    error(message, options) {
+        return toast.error(message, {
+            duration: (options === null || options === void 0 ? void 0 : options.duration) || this.defaultDuration * 1.5, // Errors stay longer
+            position: (options === null || options === void 0 ? void 0 : options.position) || this.defaultPosition,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+            style: {
+                background: 'var(--color-surface)',
+                color: 'var(--color-text)',
+                border: '1px solid var(--color-error)',
+                borderRadius: 'var(--border-radius-md)',
+            },
+        });
+    }
+    /**
+     * Show error toast with error handler integration
+     */
+    errorWithHandler(error, context, options) {
+        const userMessage = errorHandler.getErrorMessage(error);
+        const suggestion = errorHandler.getRecoverySuggestion(error);
+        errorHandler.logError(error, context);
+        const fullMessage = suggestion
+            ? `${userMessage}\n${suggestion}`
+            : userMessage;
+        return this.error(fullMessage, options);
+    }
+    /**
+     * Show warning toast
+     */
+    warning(message, options) {
+        return toast(message, {
+            duration: (options === null || options === void 0 ? void 0 : options.duration) || this.defaultDuration,
+            position: (options === null || options === void 0 ? void 0 : options.position) || this.defaultPosition,
+            icon: ((options === null || options === void 0 ? void 0 : options.icon) || '⚠️'),
+            style: {
+                background: 'var(--color-surface)',
+                color: 'var(--color-text)',
+                border: '1px solid var(--color-warning)',
+                borderRadius: 'var(--border-radius-md)',
+            },
+        });
+    }
+    /**
+     * Show info toast
+     */
+    info(message, options) {
+        return toast(message, {
+            duration: (options === null || options === void 0 ? void 0 : options.duration) || this.defaultDuration,
+            position: (options === null || options === void 0 ? void 0 : options.position) || this.defaultPosition,
+            icon: ((options === null || options === void 0 ? void 0 : options.icon) || 'ℹ️'),
+            style: {
+                background: 'var(--color-surface)',
+                color: 'var(--color-text)',
+                border: '1px solid var(--color-primary)',
+                borderRadius: 'var(--border-radius-md)',
+            },
+        });
+    }
+    /**
+     * Show loading toast
+     */
+    loading(message, options) {
+        return toast.loading(message, {
+            position: (options === null || options === void 0 ? void 0 : options.position) || this.defaultPosition,
+            style: {
+                background: 'var(--color-surface)',
+                color: 'var(--color-text)',
+                border: '1px solid var(--color-border)',
+                borderRadius: 'var(--border-radius-md)',
+            },
+        });
+    }
+    /**
+     * Show promise toast (loading -> success/error)
+     */
+    promise(promise, messages, options) {
+        return toast.promise(promise, {
+            loading: messages.loading,
+            success: messages.success,
+            error: (err) => {
+                const userMessage = errorHandler.getErrorMessage(err);
+                return messages.error || userMessage;
+            },
+        }, {
+            position: (options === null || options === void 0 ? void 0 : options.position) || this.defaultPosition,
+            style: {
+                background: 'var(--color-surface)',
+                color: 'var(--color-text)',
+                borderRadius: 'var(--border-radius-md)',
+            },
+        });
+    }
+    /**
+     * Dismiss toast
+     */
+    dismiss(toastId) {
+        toast.dismiss(toastId);
+    }
+    /**
+     * Dismiss all toasts
+     */
+    dismissAll() {
+        toast.dismiss();
+    }
+}
+// Export singleton instance
+export const toastService = new ToastService();
+// Re-export for convenience
+export { toastService as toast };

package/dist/utils/tokenUtils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Token Utilities
+ * Helper functions for handling SOL and SPL tokens
+ */
+import { PublicKey } from '@solana/web3.js';
+export declare const SOL_MINT: PublicKey;
+export declare const USDC_DEVNET_MINT: PublicKey;
+export declare const USDC_MAINNET_MINT: PublicKey;
+/**
+ * Check if a token mint is native SOL
+ */
+export declare function isNativeSOL(tokenMint: PublicKey | string): boolean;
+/**
+ * Check if a token mint is USDC
+ */
+export declare function isUSDC(tokenMint: PublicKey | string): boolean;
+/**
+ * Get token name from mint
+ */
+export declare function getTokenName(tokenMint: PublicKey | string): string;
+/**
+ * Get token decimals
+ */
+export declare function getTokenDecimals(tokenMint: PublicKey | string): number;
+/**
+ * Convert amount to lamports based on token type
+ */
+export declare function toLamports(amount: number, tokenMint: PublicKey | string): number;
+/**
+ * Convert lamports to amount based on token type
+ */
+export declare function fromLamports(lamports: number, tokenMint: PublicKey | string): number;
+//# sourceMappingURL=tokenUtils.d.ts.map

package/dist/utils/tokenUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenUtils.d.ts","sourceRoot":"","sources":["../../src/utils/tokenUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAmC,MAAM,iBAAiB,CAAC;AAI7E,eAAO,MAAM,QAAQ,WAA0B,CAAC;AAGhD,eAAO,MAAM,gBAAgB,WAAgE,CAAC;AAG9F,eAAO,MAAM,iBAAiB,WAAgE,CAAC;AAE/F;;GAEG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAKlE;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAG7D;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAQlE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAQtE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAGhF;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAGpF"}

package/dist/utils/tokenUtils.js

@@ -0,0 +1,66 @@
+/**
+ * Token Utilities
+ * Helper functions for handling SOL and SPL tokens
+ */
+import { PublicKey, SystemProgram } from '@solana/web3.js';
+import { NATIVE_MINT } from '@solana/spl-token';
+// SOL native mint (System Program)
+export const SOL_MINT = SystemProgram.programId;
+// USDC devnet mint
+export const USDC_DEVNET_MINT = new PublicKey('EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v');
+// USDC mainnet mint
+export const USDC_MAINNET_MINT = new PublicKey('EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v');
+/**
+ * Check if a token mint is native SOL
+ */
+export function isNativeSOL(tokenMint) {
+    const mint = typeof tokenMint === 'string' ? new PublicKey(tokenMint) : tokenMint;
+    // Native SOL uses SystemProgram
+    // We can also check against NATIVE_MINT (wrapped SOL)
+    return mint.equals(SOL_MINT) || mint.equals(NATIVE_MINT);
+}
+/**
+ * Check if a token mint is USDC
+ */
+export function isUSDC(tokenMint) {
+    const mint = typeof tokenMint === 'string' ? new PublicKey(tokenMint) : tokenMint;
+    return mint.equals(USDC_DEVNET_MINT) || mint.equals(USDC_MAINNET_MINT);
+}
+/**
+ * Get token name from mint
+ */
+export function getTokenName(tokenMint) {
+    if (isNativeSOL(tokenMint)) {
+        return 'SOL';
+    }
+    if (isUSDC(tokenMint)) {
+        return 'USDC';
+    }
+    return 'Token';
+}
+/**
+ * Get token decimals
+ */
+export function getTokenDecimals(tokenMint) {
+    if (isNativeSOL(tokenMint)) {
+        return 9; // SOL has 9 decimals
+    }
+    if (isUSDC(tokenMint)) {
+        return 6; // USDC has 6 decimals
+    }
+    return 9; // Default to 9
+}
+/**
+ * Convert amount to lamports based on token type
+ */
+export function toLamports(amount, tokenMint) {
+    const decimals = getTokenDecimals(tokenMint);
+    return Math.floor(amount * Math.pow(10, decimals));
+}
+/**
+ * Convert lamports to amount based on token type
+ */
+export function fromLamports(lamports, tokenMint) {
+    const decimals = getTokenDecimals(tokenMint);
+    return lamports / Math.pow(10, decimals);
+}

package/dist/utils/validation.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Validation Utilities
+ * Centralized validation functions for user inputs
+ */
+import { PublicKey } from '@solana/web3.js';
+export interface ValidationResult {
+    valid: boolean;
+    error?: string;
+    number?: number;
+}
+/**
+ * Validate and parse numeric input
+ */
+export declare function validateNumericInput(input: string): ValidationResult;
+/**
+ * Validate stake amount
+ */
+export declare function validateStakeAmount(amount: number, balance: number, minStake?: number): ValidationResult;
+/**
+ * Validate unstake amount
+ */
+export declare function validateUnstakeAmount(amount: number, stakedAmount: number): ValidationResult;
+/**
+ * Validate PublicKey
+ */
+export declare function validatePublicKey(address: string | PublicKey): ValidationResult;
+/**
+ * Validate vault ID
+ */
+export declare function validateVaultId(vaultId: number): ValidationResult;
+/**
+ * Validate percentage (0-100)
+ */
+export declare function validatePercentage(value: number): ValidationResult;
+//# sourceMappingURL=validation.d.ts.map

package/dist/utils/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/utils/validation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAqBpE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAU,GAAG,gBAAgB,CAc3G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,gBAAgB,CAU5F;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,CAQ/E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,CAMjE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAMlE"}

package/dist/utils/validation.js

@@ -0,0 +1,83 @@
+/**
+ * Validation Utilities
+ * Centralized validation functions for user inputs
+ */
+import { PublicKey } from '@solana/web3.js';
+/**
+ * Validate and parse numeric input
+ */
+export function validateNumericInput(input) {
+    if (!input || input.trim() === '') {
+        return { valid: false, error: 'Please enter an amount' };
+    }
+    const trimmed = input.trim();
+    const number = parseFloat(trimmed);
+    if (isNaN(number)) {
+        return { valid: false, error: 'Please enter a valid number' };
+    }
+    if (number <= 0) {
+        return { valid: false, error: 'Amount must be greater than 0' };
+    }
+    if (!isFinite(number)) {
+        return { valid: false, error: 'Amount must be a finite number' };
+    }
+    return { valid: true, number };
+}
+/**
+ * Validate stake amount
+ */
+export function validateStakeAmount(amount, balance, minStake = 0) {
+    if (isNaN(amount) || amount <= 0) {
+        return { valid: false, error: 'Amount must be greater than 0' };
+    }
+    if (amount < minStake) {
+        return { valid: false, error: `Minimum stake amount is ${minStake}` };
+    }
+    if (amount > balance) {
+        return { valid: false, error: 'Insufficient balance' };
+    }
+    return { valid: true };
+}
+/**
+ * Validate unstake amount
+ */
+export function validateUnstakeAmount(amount, stakedAmount) {
+    if (isNaN(amount) || amount <= 0) {
+        return { valid: false, error: 'Amount must be greater than 0' };
+    }
+    if (amount > stakedAmount) {
+        return { valid: false, error: 'Insufficient staked balance' };
+    }
+    return { valid: true };
+}
+/**
+ * Validate PublicKey
+ */
+export function validatePublicKey(address) {
+    try {
+        const pubkey = typeof address === 'string' ? new PublicKey(address) : address;
+        // PublicKey constructor will throw if invalid
+        return { valid: true };
+    }
+    catch (error) {
+        return { valid: false, error: 'Invalid public key address' };
+    }
+}
+/**
+ * Validate vault ID
+ */
+export function validateVaultId(vaultId) {
+    if (!Number.isInteger(vaultId) || vaultId <= 0) {
+        return { valid: false, error: 'Invalid vault ID' };
+    }
+    return { valid: true };
+}
+/**
+ * Validate percentage (0-100)
+ */
+export function validatePercentage(value) {
+    if (isNaN(value) || value < 0 || value > 100) {
+        return { valid: false, error: 'Percentage must be between 0 and 100' };
+    }
+    return { valid: true };
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "keynesol-shared",
+  "version": "1.0.0",
+  "description": "Shared code package for Keynesol Web3 Prediction Platform",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "solana",
+    "web3",
+    "staking",
+    "shared"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@coral-xyz/anchor": "^0.31.1",
+    "@solana/spl-token": "^0.3.9",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-react-ui": "^0.9.35",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/web3.js": "^1.87.6",
+    "@supabase/supabase-js": "^2.90.1",
+    "react-hot-toast": "^2.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.6"
+  }
+}

package/src/components/Common/ErrorBoundary.tsx

@@ -0,0 +1,135 @@
+/**
+ * ErrorBoundary Component
+ * Requirements: 11.1 - Global error handling with React error boundaries
+ */
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import styled from 'styled-components';
+import { ErrorMessage } from './ErrorMessage';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+const Container = styled.div`
+  padding: var(--spacing-xl, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+`;
+
+const ErrorTitle = styled.h2`
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-error, #dc3545);
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+
+const ErrorDetails = styled.details`
+  margin-top: var(--spacing-lg, 1.5rem);
+  width: 100%;
+  max-width: 800px;
+`;
+
+const ErrorSummary = styled.summary`
+  cursor: pointer;
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+  margin-bottom: var(--spacing-md, 1rem);
+  
+  &:hover {
+    color: var(--color-text, #1a1a1a);
+  }
+`;
+
+const ErrorCode = styled.pre`
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: var(--border-radius-md, 0.375rem);
+  padding: var(--spacing-md, 1rem);
+  overflow-x: auto;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary, #6b7280);
+  max-height: 300px;
+  overflow-y: auto;
+`;
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+      errorInfo: null,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // Log error to console and monitoring service
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    
+    // TODO: Send to error monitoring service (e.g., Sentry)
+    // logErrorToService(error, errorInfo);
+
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  handleReset = (): void => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const isDevelopment = typeof process !== 'undefined' && process.env?.NODE_ENV === 'development';
+
+      return (
+        <Container>
+          <ErrorTitle>Something went wrong</ErrorTitle>
+          <ErrorMessage
+            message={this.state.error?.message || 'An unexpected error occurred'}
+            onRetry={this.handleReset}
+          />
+          
+          {isDevelopment && this.state.errorInfo && (
+            <ErrorDetails>
+              <ErrorSummary>Error Details (Development Only)</ErrorSummary>
+              <ErrorCode>
+                {this.state.error?.toString()}
+                {this.state.errorInfo.componentStack}
+              </ErrorCode>
+            </ErrorDetails>
+          )}
+        </Container>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/Common/ErrorMessage.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface ErrorMessageProps {
+  message: string;
+  onRetry?: () => void;
+}
+
+export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message, onRetry }) => {
+  return (
+    <Container>
+      <Icon>⚠️</Icon>
+      <Message>{message}</Message>
+      {onRetry && <RetryButton onClick={onRetry}>Try Again</RetryButton>}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--color-error, #dc3545);
+  border-radius: var(--border-radius-lg, 0.5rem);
+  padding: var(--spacing-xl, 1.5rem);
+  text-align: center;
+`;
+
+const Icon = styled.div`
+  font-size: 3rem;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+
+const Message = styled.p`
+  color: var(--color-error, #dc3545);
+  font-size: 1rem;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+
+const RetryButton = styled.button`
+  background-color: var(--color-error, #dc3545);
+  color: white;
+  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
+  border-radius: var(--border-radius-md, 0.375rem);
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+  }
+`;

package/src/components/Common/Loading.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+interface LoadingProps {
+  size?: 'small' | 'medium' | 'large';
+  text?: string;
+}
+
+export const Loading: React.FC<LoadingProps> = ({ size = 'medium', text }) => {
+  return (
+    <Container>
+      <Spinner size={size} />
+      {text && <LoadingText>{text}</LoadingText>}
+    </Container>
+  );
+};
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md, 1rem);
+  padding: var(--spacing-xl, 1.5rem);
+`;
+
+const Spinner = styled.div<{ size: string }>`
+  width: ${props => {
+    switch (props.size) {
+      case 'small': return '24px';
+      case 'large': return '64px';
+      default: return '48px';
+    }
+  }};
+  height: ${props => {
+    switch (props.size) {
+      case 'small': return '24px';
+      case 'large': return '64px';
+      default: return '48px';
+    }
+  }};
+  border: 4px solid var(--color-border, #e5e7eb);
+  border-top-color: var(--color-primary, #6a8102);
+  border-radius: 50%;
+  animation: ${spin} 1s linear infinite;
+`;
+
+const LoadingText = styled.p`
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 1rem;
+  margin: 0;
+`;