keynesol-shared 1.0.0

package/src/components/Common/LoadingIndicator.tsx

@@ -0,0 +1,143 @@
+/**
+ * Loading Indicator Component
+ * Displays loading feedback appropriate to context
+ * Requirements: 5.2, 5.5
+ */
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+export type LoadingType = 'spinner' | 'progress' | 'dots';
+export type LoadingSize = 'small' | 'medium' | 'large';
+
+interface LoadingIndicatorProps {
+  type: LoadingType;
+  size?: LoadingSize;
+  message?: string;
+  progress?: number; // 0-100 for progress type
+}
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+
+const dots = keyframes`
+  0%, 20% {
+    content: '.';
+  }
+  40% {
+    content: '..';
+  }
+  60%, 100% {
+    content: '...';
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md, 1rem);
+  padding: var(--spacing-lg, 1.5rem);
+`;
+
+const Spinner = styled.div<{ size: LoadingSize }>`
+  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 ProgressBarContainer = styled.div`
+  width: 100%;
+  max-width: 300px;
+  height: 8px;
+  background: var(--color-border, #e5e7eb);
+  border-radius: var(--border-radius-md, 0.375rem);
+  overflow: hidden;
+`;
+
+const ProgressBar = styled.div<{ progress: number }>`
+  height: 100%;
+  width: ${props => props.progress}%;
+  background: linear-gradient(90deg, var(--color-primary, #6a8102), var(--color-secondary, #ffc107));
+  border-radius: var(--border-radius-md, 0.375rem);
+  transition: width 0.3s ease;
+`;
+
+const Dots = styled.div`
+  font-size: 1.5rem;
+  color: var(--color-primary, #6a8102);
+  
+  &::after {
+    content: '.';
+    animation: ${dots} 1.5s steps(4, end) infinite;
+  }
+`;
+
+const Message = styled.p`
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+  margin: 0;
+  text-align: center;
+`;
+
+const ProgressText = styled.span`
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-top: var(--spacing-xs, 0.25rem);
+`;
+
+export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
+  type,
+  size = 'medium',
+  message,
+  progress,
+}) => {
+  const renderIndicator = () => {
+    switch (type) {
+      case 'spinner':
+        return <Spinner size={size} />;
+
+      case 'progress':
+        return (
+          <div style={{ width: '100%', maxWidth: '300px' }}>
+            <ProgressBarContainer>
+              <ProgressBar progress={progress || 0} />
+            </ProgressBarContainer>
+            {progress !== undefined && (
+              <ProgressText>{Math.round(progress)}%</ProgressText>
+            )}
+          </div>
+        );
+
+      case 'dots':
+        return <Dots />;
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Container>
+      {renderIndicator()}
+      {message && <Message>{message}</Message>}
+    </Container>
+  );
+};

package/src/components/Common/ProgramStatus.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { useProgram } from '../../hooks/useProgram';
+import { ErrorMessage } from './ErrorMessage';
+import toast from 'react-hot-toast';
+
+export const ProgramStatus: React.FC = () => {
+  const { program, idl, idlError, programId } = useProgram();
+  const [showError, setShowError] = React.useState(false);
+
+  useEffect(() => {
+    if (idlError) {
+      setShowError(true);
+      toast.error(`Failed to load program: ${idlError}`, {
+        duration: 5000,
+      });
+    }
+  }, [idlError]);
+
+  // Don't show anything if program is loading or ready
+  if (!idlError) {
+    return null;
+  }
+
+  return (
+    <Container>
+      <ErrorMessage
+        message={`Failed to load program contract. Please refresh the page. Error: ${idlError}`}
+        onRetry={() => window.location.reload()}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  margin: var(--spacing-md, 1rem) 0;
+`;

package/src/components/Common/Skeleton.tsx

@@ -0,0 +1,83 @@
+/**
+ * Skeleton Screen Components
+ * Requirements: 11.3 - Loading states with skeleton screens for better perceived performance
+ */
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const shimmer = keyframes`
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+`;
+
+const SkeletonBase = styled.div<{ width?: string; height?: string }>`
+  background: linear-gradient(
+    90deg,
+    var(--color-surface, #f9fafb) 0%,
+    var(--color-border, #e5e7eb) 50%,
+    var(--color-surface, #f9fafb) 100%
+  );
+  background-size: 1000px 100%;
+  animation: ${shimmer} 2s infinite;
+  border-radius: var(--border-radius-md, 0.375rem);
+  width: ${props => props.width || '100%'};
+  height: ${props => props.height || '20px'};
+`;
+
+export const SkeletonCard = styled(SkeletonBase)`
+  height: 200px;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+
+export const SkeletonText = styled(SkeletonBase)`
+  height: 16px;
+  margin-bottom: var(--spacing-xs, 0.25rem);
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const SkeletonTitle = styled(SkeletonBase)`
+  height: 24px;
+  width: 60%;
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+
+export const SkeletonButton = styled(SkeletonBase)`
+  height: 40px;
+  width: 120px;
+  border-radius: var(--border-radius-md, 0.375rem);
+`;
+
+export const SkeletonAvatar = styled(SkeletonBase)`
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+`;
+
+export const VaultCardSkeleton: React.FC = () => (
+  <SkeletonCard />
+);
+
+export const StatsSkeleton: React.FC = () => (
+  <>
+    <SkeletonTitle />
+    <SkeletonText width="100%" />
+    <SkeletonText width="80%" />
+    <SkeletonText width="90%" />
+  </>
+);
+
+export const ProfileSkeleton: React.FC = () => (
+  <>
+    <SkeletonAvatar width="80px" height="80px" />
+    <SkeletonTitle width="40%" />
+    <SkeletonText width="60%" />
+    <SkeletonText width="50%" />
+  </>
+);

package/src/components/Common/SkeletonScreen.tsx

@@ -0,0 +1,166 @@
+/**
+ * Skeleton Screen Component
+ * Loading placeholder that mimics content structure
+ * Requirements: 5.1
+ */
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+export type SkeletonVariant = 'card' | 'table' | 'chart' | 'list' | 'text';
+export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+
+interface SkeletonScreenProps {
+  variant: SkeletonVariant;
+  count?: number;
+  height?: string;
+  width?: string;
+  animation?: SkeletonAnimation;
+}
+
+const pulse = keyframes`
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+`;
+
+const wave = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+`;
+
+interface SkeletonBaseProps {
+  $animation?: SkeletonAnimation;
+  $height?: string;
+  $width?: string;
+}
+
+const SkeletonBase = styled.div<SkeletonBaseProps>`
+  background: linear-gradient(
+    90deg,
+    var(--color-border, #e5e7eb) 0%,
+    var(--color-surface, #f9fafb) 50%,
+    var(--color-border, #e5e7eb) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: var(--border-radius-md, 0.375rem);
+  
+  ${props => {
+    switch (props.$animation) {
+      case 'pulse':
+        return `animation: ${pulse} 1.5s ease-in-out infinite;`;
+      case 'wave':
+        return `animation: ${wave} 1.5s ease-in-out infinite;`;
+      default:
+        return '';
+    }
+  }}
+`;
+
+const CardSkeleton = styled(SkeletonBase)`
+  height: ${props => props.$height || '200px'};
+  width: ${props => props.$width || '100%'};
+  margin-bottom: var(--spacing-md, 1rem);
+`;
+
+const TableSkeleton = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 0.5rem);
+`;
+
+const TableRowSkeleton = styled(SkeletonBase)`
+  height: ${props => props.$height || '48px'};
+  width: 100%;
+`;
+
+const ChartSkeleton = styled(SkeletonBase)`
+  height: ${props => props.$height || '300px'};
+  width: ${props => props.$width || '100%'};
+  border-radius: var(--border-radius-lg, 0.5rem);
+`;
+
+const ListSkeleton = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 1rem);
+`;
+
+const ListItemSkeleton = styled(SkeletonBase)`
+  height: ${props => props.$height || '60px'};
+  width: 100%;
+`;
+
+const TextSkeleton = styled(SkeletonBase)`
+  height: ${props => props.$height || '1em'};
+  width: ${props => props.$width || '100%'};
+  margin-bottom: var(--spacing-xs, 0.25rem);
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const SkeletonScreen: React.FC<SkeletonScreenProps> = ({
+  variant,
+  count = 1,
+  height,
+  width,
+  animation = 'pulse',
+}) => {
+  const renderSkeleton = () => {
+    switch (variant) {
+      case 'card':
+        return Array.from({ length: count }).map((_, i) => (
+          <CardSkeleton key={i} $animation={animation} $height={height} $width={width} />
+        ));
+
+      case 'table':
+        return (
+          <TableSkeleton>
+            {Array.from({ length: count }).map((_, i) => (
+              <TableRowSkeleton key={i} $animation={animation} $height={height} />
+            ))}
+          </TableSkeleton>
+        );
+
+      case 'chart':
+        return (
+          <ChartSkeleton $animation={animation} $height={height} $width={width} />
+        );
+
+      case 'list':
+        return (
+          <ListSkeleton>
+            {Array.from({ length: count }).map((_, i) => (
+              <ListItemSkeleton key={i} $animation={animation} $height={height} />
+            ))}
+          </ListSkeleton>
+        );
+
+      case 'text':
+        return Array.from({ length: count }).map((_, i) => (
+          <TextSkeleton
+            key={i}
+            $animation={animation}
+            $height={height}
+            $width={i === count - 1 ? '80%' : width} // Last line shorter
+          />
+        ));
+
+      default:
+        return null;
+    }
+  };
+
+  return <>{renderSkeleton()}</>;
+};

package/src/components/Common/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Common Components Index
+ */
+export * from './ErrorBoundary';
+export * from './ErrorMessage';
+export * from './Loading';
+export * from './LoadingIndicator';
+export * from './Skeleton';
+export * from './SkeletonScreen';
+export * from './ProgramStatus';

package/src/components/Wallet/TransactionStatus.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StatusContainer = styled.div<{ status: 'pending' | 'confirmed' | 'failed' }>`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--color-surface, #f9fafb);
+  border: 1px solid ${props => {
+    switch (props.status) {
+      case 'confirmed': return 'var(--color-success, #10b981)';
+      case 'failed': return 'var(--color-error, #dc3545)';
+      default: return 'var(--color-primary, #6a8102)';
+    }
+  }};
+  border-radius: 0.5rem;
+  animation: slideIn 0.3s ease-out;
+  
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+`;
+
+const StatusIcon = styled.div<{ status: 'pending' | 'confirmed' | 'failed' }>`
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  
+  ${props => props.status === 'pending' && `
+    animation: spin 1s linear infinite;
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  `}
+`;
+
+const StatusContent = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+const StatusTitle = styled.span`
+  font-weight: 600;
+  color: var(--color-text, #1a1a1a);
+  font-size: 0.875rem;
+`;
+
+const StatusMessage = styled.span`
+  font-size: 0.75rem;
+  color: var(--color-text-secondary, #6b7280);
+`;
+
+const SignatureLink = styled.a`
+  font-size: 0.75rem;
+  color: var(--color-primary, #6a8102);
+  text-decoration: none;
+  font-family: monospace;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+interface TransactionStatusProps {
+  status: 'pending' | 'confirmed' | 'failed';
+  message: string;
+  signature?: string;
+  explorerUrl?: string;
+  network?: string;
+}
+
+const TransactionStatus: React.FC<TransactionStatusProps> = ({
+  status,
+  message,
+  signature,
+  explorerUrl = 'https://explorer.solana.com/tx',
+  network
+}) => {
+  const getIcon = () => {
+    switch (status) {
+      case 'confirmed':
+        return '✓';
+      case 'failed':
+        return '✗';
+      default:
+        return '⟳';
+    }
+  };
+
+  const getTitle = () => {
+    switch (status) {
+      case 'confirmed':
+        return 'Transaction Confirmed';
+      case 'failed':
+        return 'Transaction Failed';
+      default:
+        return 'Transaction Pending';
+    }
+  };
+
+  const networkParam = network || 
+    (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_SOLANA_NETWORK) || 
+    'devnet';
+
+  return (
+    <StatusContainer status={status}>
+      <StatusIcon status={status}>{getIcon()}</StatusIcon>
+      <StatusContent>
+        <StatusTitle>{getTitle()}</StatusTitle>
+        <StatusMessage>{message}</StatusMessage>
+        {signature && status === 'confirmed' && (
+          <SignatureLink
+            href={`${explorerUrl}/${signature}?cluster=${networkParam}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View on Explorer →
+          </SignatureLink>
+        )}
+      </StatusContent>
+    </StatusContainer>
+  );
+};
+
+export default TransactionStatus;

package/src/components/Wallet/WalletBalance.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useWallet, useConnection } from '@solana/wallet-adapter-react';
+import { LAMPORTS_PER_SOL } from '@solana/web3.js';
+
+const BalanceContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--color-surface, #f9fafb);
+  border: 1px solid var(--color-primary, #6a8102);
+  border-radius: 0.5rem;
+`;
+
+const BalanceLabel = styled.span`
+  font-size: 0.75rem;
+  color: var(--color-text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
+
+const BalanceValue = styled.span`
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-primary, #6a8102);
+  font-family: monospace;
+`;
+
+const LoadingSpinner = styled.div`
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-primary, #6a8102);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`;
+
+const WalletBalance: React.FC = () => {
+  const { publicKey, connected } = useWallet();
+  const { connection } = useConnection();
+  const [balance, setBalance] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!connected || !publicKey) {
+      setBalance(null);
+      return;
+    }
+
+    const fetchBalance = async () => {
+      try {
+        setLoading(true);
+        const lamports = await connection.getBalance(publicKey);
+        setBalance(lamports / LAMPORTS_PER_SOL);
+      } catch (error) {
+        console.error('Failed to fetch balance:', error);
+        setBalance(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchBalance();
+
+    // Poll for balance updates every 10 seconds
+    const interval = setInterval(fetchBalance, 10000);
+
+    return () => clearInterval(interval);
+  }, [connected, publicKey, connection]);
+
+  if (!connected) {
+    return null;
+  }
+
+  return (
+    <BalanceContainer>
+      <BalanceLabel>Wallet Balance</BalanceLabel>
+      {loading ? (
+        <LoadingSpinner />
+      ) : (
+        <BalanceValue>
+          {balance !== null ? `${balance.toFixed(4)} SOL` : '—'}
+        </BalanceValue>
+      )}
+    </BalanceContainer>
+  );
+};
+
+export default WalletBalance;