keynesol-shared 1.0.0

package/dist/components/Wallet/TransactionStatus.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const StatusContainer = styled.div `
+  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 `
+  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;
+  }
+`;
+const TransactionStatus = ({ status, message, signature, explorerUrl = 'https://explorer.solana.com/tx', network }) => {
+    var _a;
+    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' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NEXT_PUBLIC_SOLANA_NETWORK)) ||
+        'devnet';
+    return (_jsxs(StatusContainer, { status: status, children: [_jsx(StatusIcon, { status: status, children: getIcon() }), _jsxs(StatusContent, { children: [_jsx(StatusTitle, { children: getTitle() }), _jsx(StatusMessage, { children: message }), signature && status === 'confirmed' && (_jsx(SignatureLink, { href: `${explorerUrl}/${signature}?cluster=${networkParam}`, target: "_blank", rel: "noopener noreferrer", children: "View on Explorer \u2192" }))] })] }));
+};
+export default TransactionStatus;

package/dist/components/Wallet/TransactionStatus.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled from 'styled-components';
+const StatusContainer = styled.div `
+  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 `
+  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;
+  }
+`;
+const TransactionStatus = ({ status, message, signature, explorerUrl = 'https://explorer.solana.com/tx', network }) => {
+    var _a;
+    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' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.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/dist/components/Wallet/WalletBalance.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const WalletBalance: React.FC;
+export default WalletBalance;
+//# sourceMappingURL=WalletBalance.d.ts.map

package/dist/components/Wallet/WalletBalance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletBalance.d.ts","sourceRoot":"","sources":["../../../src/components/Wallet/WalletBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA0CnD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAiD1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/Wallet/WalletBalance.js

@@ -0,0 +1,82 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 = () => {
+    const { publicKey, connected } = useWallet();
+    const { connection } = useConnection();
+    const [balance, setBalance] = useState(null);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (!connected || !publicKey) {
+            setBalance(null);
+            return;
+        }
+        const fetchBalance = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                setLoading(true);
+                const lamports = yield 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 (_jsxs(BalanceContainer, { children: [_jsx(BalanceLabel, { children: "Wallet Balance" }), loading ? (_jsx(LoadingSpinner, {})) : (_jsx(BalanceValue, { children: balance !== null ? `${balance.toFixed(4)} SOL` : '—' }))] }));
+};
+export default WalletBalance;

package/dist/components/Wallet/WalletBalance.jsx

@@ -0,0 +1,86 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 = () => {
+    const { publicKey, connected } = useWallet();
+    const { connection } = useConnection();
+    const [balance, setBalance] = useState(null);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (!connected || !publicKey) {
+            setBalance(null);
+            return;
+        }
+        const fetchBalance = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                setLoading(true);
+                const lamports = yield 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;

package/dist/components/Wallet/WalletButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WalletButton: React.FC;
+//# sourceMappingURL=WalletButton.d.ts.map

package/dist/components/Wallet/WalletButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletButton.d.ts","sourceRoot":"","sources":["../../../src/components/Wallet/WalletButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAqBhC,CAAC"}

package/dist/components/Wallet/WalletButton.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+import styled from 'styled-components';
+export const WalletButton = () => {
+    const { publicKey, disconnect, connected } = useWallet();
+    const { setVisible } = useWalletModal();
+    const handleClick = () => {
+        if (connected) {
+            disconnect();
+        }
+        else {
+            setVisible(true);
+        }
+    };
+    const formatAddress = (address) => {
+        return `${address.slice(0, 4)}...${address.slice(-4)}`;
+    };
+    return (_jsx(Button, { onClick: handleClick, connected: connected, children: connected && publicKey ? formatAddress(publicKey.toBase58()) : 'Connect Wallet' }));
+};
+const Button = styled.button `
+  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/dist/components/Wallet/WalletButton.jsx

@@ -0,0 +1,53 @@
+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 = () => {
+    const { publicKey, disconnect, connected } = useWallet();
+    const { setVisible } = useWalletModal();
+    const handleClick = () => {
+        if (connected) {
+            disconnect();
+        }
+        else {
+            setVisible(true);
+        }
+    };
+    const formatAddress = (address) => {
+        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 `
+  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/dist/components/Wallet/WalletConnectionModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface WalletConnectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+declare const WalletConnectionModal: React.FC<WalletConnectionModalProps>;
+export default WalletConnectionModal;
+//# sourceMappingURL=WalletConnectionModal.d.ts.map

package/dist/components/Wallet/WalletConnectionModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletConnectionModal.d.ts","sourceRoot":"","sources":["../../../src/components/Wallet/WalletConnectionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsI1B,UAAU,0BAA0B;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAmD/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/Wallet/WalletConnectionModal.js

@@ -0,0 +1,150 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useWallet } from '@solana/wallet-adapter-react';
+const ModalOverlay = styled.div `
+  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;
+`;
+const WalletConnectionModal = ({ isOpen, onClose }) => {
+    const { wallets, select, connecting } = useWallet();
+    const handleWalletSelect = (walletName) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            select(walletName);
+            onClose();
+        }
+        catch (error) {
+            console.error('Failed to select wallet:', error);
+        }
+    });
+    const handleOverlayClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    return (_jsx(ModalOverlay, { isOpen: isOpen, onClick: handleOverlayClick, children: _jsxs(ModalContent, { children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: "Connect Wallet" }), _jsx(CloseButton, { onClick: onClose, children: "\u00D7" })] }), _jsx(Description, { children: "Select a wallet to connect to the Web3 Prediction Platform and start staking." }), _jsx(WalletList, { children: wallets.map((wallet) => (_jsxs(WalletButton, { onClick: () => handleWalletSelect(wallet.adapter.name), disabled: connecting, children: [_jsx(WalletIcon, { children: wallet.adapter.icon ? (_jsx("img", { src: wallet.adapter.icon, alt: wallet.adapter.name, width: 32, height: 32 })) : ('👛') }), _jsx(WalletName, { children: wallet.adapter.name })] }, wallet.adapter.name))) })] }) }));
+};
+export default WalletConnectionModal;