keynesol-shared 1.0.0

package/src/components/Wallet/WalletButton.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+import styled from 'styled-components';
+
+export const WalletButton: React.FC = () => {
+  const { publicKey, disconnect, connected } = useWallet();
+  const { setVisible } = useWalletModal();
+
+  const handleClick = () => {
+    if (connected) {
+      disconnect();
+    } else {
+      setVisible(true);
+    }
+  };
+
+  const formatAddress = (address: string) => {
+    return `${address.slice(0, 4)}...${address.slice(-4)}`;
+  };
+
+  return (
+    <Button onClick={handleClick} connected={connected}>
+      {connected && publicKey ? formatAddress(publicKey.toBase58()) : 'Connect Wallet'}
+    </Button>
+  );
+};
+
+const Button = styled.button<{ connected: boolean }>`
+  background: ${props => 
+    props.connected 
+      ? 'var(--color-surface, #f9fafb)' 
+      : 'linear-gradient(135deg, var(--color-primary, #6a8102), var(--color-secondary, #ffc107))'
+  };
+  color: ${props => props.connected ? 'var(--color-text, #1a1a1a)' : 'var(--color-background, #ffffff)'};
+  border: ${props => props.connected ? '1px solid var(--color-primary, #6a8102)' : 'none'};
+  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;
+  box-shadow: ${props => 
+    props.connected 
+      ? '0 2px 8px rgba(106, 129, 2, 0.2)' 
+      : '0 4px 12px rgba(106, 129, 2, 0.3)'
+  };
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: ${props => 
+      props.connected 
+        ? '0 4px 12px rgba(106, 129, 2, 0.3)' 
+        : '0 6px 16px rgba(106, 129, 2, 0.4)'
+    };
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 1rem);
+    font-size: 0.875rem;
+  }
+`;

package/src/components/Wallet/WalletConnectionModal.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useWallet } from '@solana/wallet-adapter-react';
+import type { WalletName as WalletNameType } from '@solana/wallet-adapter-base';
+
+const ModalOverlay = styled.div<{ isOpen: boolean }>`
+  display: ${props => props.isOpen ? 'flex' : 'none'};
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.2s ease-in-out;
+  
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+
+const ModalContent = styled.div`
+  background: var(--color-surface, #f9fafb);
+  border: 1px solid var(--color-primary, #6a8102);
+  border-radius: 1rem;
+  padding: 2rem;
+  max-width: 400px;
+  width: 90%;
+  animation: slideUp 0.3s ease-out;
+  
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+`;
+
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+`;
+
+const ModalTitle = styled.h2`
+  font-size: 1.5rem;
+  color: var(--color-text, #1a1a1a);
+  margin: 0;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: var(--color-background, #ffffff);
+    color: var(--color-text, #1a1a1a);
+  }
+`;
+
+const WalletList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const WalletButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-primary, #6a8102);
+  border-radius: 0.5rem;
+  color: var(--color-text, #1a1a1a);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: var(--color-primary, #6a8102);
+    color: var(--color-background, #ffffff);
+    transform: translateX(4px);
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+`;
+
+const WalletIcon = styled.div`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+`;
+
+const WalletName = styled.span`
+  flex: 1;
+  text-align: left;
+`;
+
+const Description = styled.p`
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+`;
+
+interface WalletConnectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const WalletConnectionModal: React.FC<WalletConnectionModalProps> = ({ isOpen, onClose }) => {
+  const { wallets, select, connecting } = useWallet();
+
+  const handleWalletSelect = async (walletName: WalletNameType) => {
+    try {
+      select(walletName);
+      onClose();
+    } catch (error) {
+      console.error('Failed to select wallet:', error);
+    }
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <ModalOverlay isOpen={isOpen} onClick={handleOverlayClick}>
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>Connect Wallet</ModalTitle>
+          <CloseButton onClick={onClose}>×</CloseButton>
+        </ModalHeader>
+        
+        <Description>
+          Select a wallet to connect to the Web3 Prediction Platform and start staking.
+        </Description>
+        
+        <WalletList>
+          {wallets.map((wallet) => (
+            <WalletButton
+              key={wallet.adapter.name}
+              onClick={() => handleWalletSelect(wallet.adapter.name)}
+              disabled={connecting}
+            >
+              <WalletIcon>
+                {wallet.adapter.icon ? (
+                  <img src={wallet.adapter.icon} alt={wallet.adapter.name} width={32} height={32} />
+                ) : (
+                  '👛'
+                )}
+              </WalletIcon>
+              <WalletName>{wallet.adapter.name}</WalletName>
+            </WalletButton>
+          ))}
+        </WalletList>
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
+
+export default WalletConnectionModal;

package/src/components/Wallet/WalletProvider.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo, ReactNode } from 'react';
+import { ConnectionProvider, WalletProvider as SolanaWalletProvider } from '@solana/wallet-adapter-react';
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
+import { clusterApiUrl } from '@solana/web3.js';
+
+require('@solana/wallet-adapter-react-ui/styles.css');
+
+interface WalletProviderProps {
+  children: ReactNode;
+  network?: 'devnet' | 'mainnet-beta' | 'testnet';
+  rpcEndpoint?: string;
+}
+
+export const WalletProvider = ({ 
+  children, 
+  network: networkProp,
+  rpcEndpoint: rpcEndpointProp 
+}: WalletProviderProps) => {
+  // Get network from prop, environment variable, or default to devnet
+  const networkEnv = networkProp || 
+    (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_SOLANA_NETWORK) || 
+    'devnet';
+  
+  const network = networkEnv === 'mainnet-beta' 
+    ? WalletAdapterNetwork.Mainnet 
+    : networkEnv === 'testnet'
+    ? WalletAdapterNetwork.Testnet
+    : WalletAdapterNetwork.Devnet;
+  
+  // Use custom RPC endpoint if provided, otherwise use cluster API URL
+  const endpoint = useMemo(() => {
+    const customEndpoint = rpcEndpointProp || 
+      (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_RPC_ENDPOINT);
+    if (customEndpoint) {
+      return customEndpoint;
+    }
+    return clusterApiUrl(network);
+  }, [network, rpcEndpointProp]);
+
+  const wallets = useMemo(
+    () => {
+      const walletAdapters = [];
+      
+      // Only add Phantom if it's not already registered as Standard Wallet
+      try {
+        const phantom = new PhantomWalletAdapter();
+        walletAdapters.push(phantom);
+      } catch (error) {
+        console.warn('Phantom wallet adapter already registered or error:', error);
+      }
+      
+      // Add Solflare
+      try {
+        const solflare = new SolflareWalletAdapter();
+        walletAdapters.push(solflare);
+      } catch (error) {
+        console.warn('Solflare wallet adapter error:', error);
+      }
+      
+      return walletAdapters;
+    },
+    []
+  );
+
+  // Disable WebSocket for custom RPC endpoints that may not support it
+  // Solana SDK will automatically fallback to HTTP polling
+  const connectionConfig = useMemo(() => {
+    const customEndpoint = rpcEndpointProp || 
+      (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_RPC_ENDPOINT);
+    
+    // If using custom endpoint (not public Solana RPC), disable WebSocket
+    const isCustomEndpoint = customEndpoint && 
+      !customEndpoint.includes('api.devnet.solana.com') && 
+      !customEndpoint.includes('api.mainnet-beta.solana.com') &&
+      !customEndpoint.includes('api.testnet.solana.com');
+    
+    return {
+      commitment: 'confirmed' as const,
+      // Disable WebSocket for custom endpoints to avoid connection errors
+      // SDK will automatically use HTTP polling instead
+      ...(isCustomEndpoint ? { 
+        wsEndpoint: undefined,
+        disableRetryOnRateLimit: false,
+      } : {}),
+    };
+  }, [rpcEndpointProp]);
+
+  // Type assertion to fix React 18/19 compatibility
+  const ConnectionProviderComponent = ConnectionProvider as any;
+  
+    // Type assertion to fix React 18/19 compatibility
+  
+  return (
+    <ConnectionProviderComponent endpoint={endpoint} config={connectionConfig}>
+      <SolanaWalletProvider wallets={wallets} autoConnect>
+        <WalletModalProvider>
+          {children}
+        </WalletModalProvider>
+      </SolanaWalletProvider>
+    </ConnectionProviderComponent>
+  );
+};

package/src/components/Wallet/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Wallet Components Index
+ */
+export * from './WalletProvider';
+export * from './WalletButton';
+export { default as WalletBalance } from './WalletBalance';
+export { default as TransactionStatus } from './TransactionStatus';
+export { default as WalletConnectionModal } from './WalletConnectionModal';

package/src/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Components Index
+ * Export all shared components
+ */
+export * from './Common';
+export * from './Wallet';

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Hooks Index
+ * Export all shared hooks
+ */
+
+export * from './useProgram';
+export * from './useVaults';
+export * from './useTokenBalance';
+export * from './useCache';
+export * from './usePolling';

package/src/hooks/useCache.ts

@@ -0,0 +1,87 @@
+/**
+ * Caching Hook for Blockchain Data
+ * Requirements: 12.1 - Multi-level caching for blockchain data with cache invalidation
+ */
+import React from 'react';
+import { cacheManager } from '../utils/cacheManager';
+
+interface CacheEntry<T> {
+  data: T;
+  timestamp: number;
+  ttl: number; // Time to live in milliseconds
+}
+
+export interface CacheOptions {
+  ttl?: number; // Default TTL in milliseconds (5 seconds for real-time data)
+  key?: string;
+  namespace?: string; // Cache namespace
+}
+
+/**
+ * Custom hook for caching data with automatic invalidation
+ */
+export const useCache = <T,>(
+  fetchFn: () => Promise<T>,
+  options: CacheOptions = {}
+): {
+  data: T | null;
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+  invalidate: () => void;
+} => {
+  const { ttl, key, namespace = 'default' } = options;
+  const cacheKey = key || `cache_${fetchFn.toString()}`;
+
+  const [data, setData] = React.useState<T | null>(() => {
+    return cacheManager.get<T>(namespace, cacheKey);
+  });
+
+  const [loading, setLoading] = React.useState<boolean>(!data);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  const fetchData = React.useCallback(async () => {
+    // Check cache first
+    const cached = cacheManager.get<T>(namespace, cacheKey);
+    if (cached) {
+      setData(cached);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const result = await fetchFn();
+      
+      // Store in cache (using default TTL from namespace config if not provided)
+      const cacheTtl = ttl || 5000; // Default 5 seconds
+      cacheManager.set(namespace, cacheKey, result, cacheTtl);
+      setData(result);
+    } catch (err: any) {
+      setError(err);
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchFn, namespace, cacheKey, ttl]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const invalidate = React.useCallback(() => {
+    cacheManager.invalidate(namespace, cacheKey);
+    setData(null);
+    fetchData();
+  }, [namespace, cacheKey, fetchData]);
+
+  return {
+    data,
+    loading,
+    error,
+    refetch: fetchData,
+    invalidate,
+  };
+};

package/src/hooks/usePolling.ts

@@ -0,0 +1,98 @@
+/**
+ * Polling Hook for Real-Time Data Synchronization
+ * Requirements: 10.1 - 5-second blockchain data synchronization
+ */
+import { useEffect, useRef, useCallback } from 'react';
+
+export interface PollingOptions {
+  interval?: number; // Default 5000ms (5 seconds)
+  enabled?: boolean; // Default true
+  onError?: (error: Error) => void;
+  immediate?: boolean; // Run immediately on mount
+}
+
+/**
+ * Hook for polling data at regular intervals
+ * Implements Requirement 10.1: 5-second data synchronization
+ */
+export const usePolling = (
+  callback: () => Promise<void> | void,
+  options: PollingOptions = {}
+): {
+  start: () => void;
+  stop: () => void;
+  isActive: boolean;
+} => {
+  const {
+    interval = 5000, // 5 seconds default
+    enabled = true,
+    onError,
+    immediate = true,
+  } = options;
+
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const isActiveRef = useRef<boolean>(false);
+  const callbackRef = useRef(callback);
+
+  // Update callback ref when it changes
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const execute = useCallback(async () => {
+    try {
+      await callbackRef.current();
+    } catch (error: any) {
+      console.error('Polling error:', error);
+      if (onError) {
+        onError(error);
+      }
+    }
+  }, [onError]);
+
+  const start = useCallback(() => {
+    if (isActiveRef.current) {
+      return; // Already running
+    }
+
+    isActiveRef.current = true;
+
+    // Execute immediately if requested
+    if (immediate) {
+      execute();
+    }
+
+    // Set up interval
+    intervalRef.current = setInterval(() => {
+      execute();
+    }, interval);
+  }, [interval, immediate, execute]);
+
+  const stop = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    isActiveRef.current = false;
+  }, []);
+
+  // Auto-start/stop based on enabled flag
+  useEffect(() => {
+    if (enabled) {
+      start();
+    } else {
+      stop();
+    }
+
+    // Cleanup on unmount
+    return () => {
+      stop();
+    };
+  }, [enabled, start, stop]);
+
+  return {
+    start,
+    stop,
+    isActive: isActiveRef.current,
+  };
+};

package/src/hooks/useProgram.ts

@@ -0,0 +1,93 @@
+import { useMemo, useState, useEffect } from 'react';
+import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+import { Program, AnchorProvider, Idl } from '@coral-xyz/anchor';
+import { PublicKey } from '@solana/web3.js';
+
+// Program ID from environment or default
+const getProgramId = (): PublicKey => {
+  const PROGRAM_ID_STRING = typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_PROGRAM_ID 
+    ? process.env.NEXT_PUBLIC_PROGRAM_ID 
+    : 'Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS';
+  
+  try {
+    return new PublicKey(PROGRAM_ID_STRING);
+  } catch (error) {
+    console.error('Invalid Program ID:', PROGRAM_ID_STRING, error);
+    // Fallback to default
+    return new PublicKey('Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS');
+  }
+};
+
+const PROGRAM_ID = getProgramId();
+
+export interface UseProgramOptions {
+  idlPath?: string; // Path to IDL file, default: '/web3_prediction_platform.json'
+  programId?: PublicKey; // Override program ID
+}
+
+export const useProgram = (options: UseProgramOptions = {}) => {
+  const { connection } = useConnection();
+  const wallet = useWallet();
+  const [idl, setIdl] = useState<Idl | null>(null);
+  const [idlError, setIdlError] = useState<string | null>(null);
+
+  const idlPath = options.idlPath || '/web3_prediction_platform.json';
+  const programId = options.programId || PROGRAM_ID;
+
+  // Load IDL from public folder (works with static export)
+  useEffect(() => {
+    const loadIdl = async () => {
+      try {
+        const response = await fetch(idlPath);
+        if (!response.ok) {
+          throw new Error(`Failed to load IDL: ${response.statusText}`);
+        }
+        const idlData = await response.json();
+        setIdl(idlData as Idl);
+        setIdlError(null);
+      } catch (error: any) {
+        console.error('Error loading IDL:', error);
+        setIdlError(error.message || 'Failed to load IDL');
+        setIdl(null);
+      }
+    };
+
+    loadIdl();
+  }, [idlPath]);
+
+  const provider = useMemo(() => {
+    if (!wallet.publicKey || !connection) return null;
+    
+    try {
+      return new AnchorProvider(
+        connection,
+        wallet as any,
+        { commitment: 'confirmed' }
+      );
+    } catch (error) {
+      console.error('Error creating provider:', error);
+      return null;
+    }
+  }, [connection, wallet]);
+
+  const program = useMemo(() => {
+    if (!provider || !idl) return null;
+    
+    try {
+      // Anchor Program constructor: new Program(idl, programId, provider)
+      // @ts-ignore - TypeScript inference issue with Program constructor argument types
+      return new Program(idl as any, programId, provider as AnchorProvider) as any;
+    } catch (error) {
+      console.error('Error creating program:', error);
+      return null;
+    }
+  }, [provider, idl, programId]);
+
+  return { 
+    program, 
+    provider,
+    idl,
+    idlError,
+    programId
+  };
+};