cosmos-connect-react 0.1.0

package/dist/CosmosProvider.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { Client, ClientState, ClientConfig } from 'cosmos-connect-core';
+interface CosmosContextValue {
+    client: Client;
+    state: ClientState;
+}
+export interface CosmosProviderProps {
+    children: ReactNode;
+    config?: Partial<ClientConfig>;
+}
+export declare const CosmosProvider: React.FC<CosmosProviderProps>;
+export declare const useCosmos: () => CosmosContextValue;
+export {};

package/dist/CosmosProvider.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, } from 'react';
+import { createClient, TERRA_CLASSIC, KeplrWallet, GalaxyStationWallet, LeapWallet, WalletConnectWallet, } from 'cosmos-connect-core';
+const CosmosContext = createContext(null);
+const DEFAULT_CONFIG = {
+    chains: [TERRA_CLASSIC],
+    wallets: [
+        new GalaxyStationWallet(),
+        new KeplrWallet(),
+        new LeapWallet(),
+        new WalletConnectWallet({
+            projectId: '39190b939e067ecb6dccdb7c77653a42', // Default placeholder or instructions needed
+        }),
+    ],
+};
+export const CosmosProvider = ({ children, config, }) => {
+    const [client] = useState(() => {
+        const fullConfig = {
+            chains: config?.chains || DEFAULT_CONFIG.chains,
+            wallets: config?.wallets || DEFAULT_CONFIG.wallets,
+            storage: config?.storage || DEFAULT_CONFIG.storage,
+        };
+        return createClient(fullConfig);
+    });
+    const [state, setState] = useState(client.state);
+    useEffect(() => {
+        return client.subscribe(setState);
+    }, [client]);
+    return (_jsx(CosmosContext.Provider, { value: { client, state }, children: children }));
+};
+export const useCosmos = () => {
+    const context = useContext(CosmosContext);
+    if (!context) {
+        throw new Error('useCosmos must be used within a CosmosProvider');
+    }
+    return context;
+};

package/dist/components/Avatar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AvatarProps {
+    address: string;
+    size?: number;
+}
+/**
+ * A simple, colorful avatar generated from the address.
+ * Mimics the ConnectKit/RainbowKit feel.
+ */
+export declare const Avatar: React.FC<AvatarProps>;
+export {};

package/dist/components/Avatar.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A simple, colorful avatar generated from the address.
+ * Mimics the ConnectKit/RainbowKit feel.
+ */
+export const Avatar = ({ address, size = 32 }) => {
+    // Simple deterministic color generation from address
+    const colors = [
+        '#FFADAD', '#FFD6A5', '#FDFFB6', '#CAFFBF',
+        '#9BF6FF', '#A0C4FF', '#BDB2FF', '#FFC6FF'
+    ];
+    const getHash = (str) => {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return hash;
+    };
+    const colorIndex = Math.abs(getHash(address)) % colors.length;
+    const secondaryColorIndex = (colorIndex + 3) % colors.length;
+    return (_jsx("div", { style: {
+            width: size,
+            height: size,
+            borderRadius: '50%',
+            background: `linear-gradient(135deg, ${colors[colorIndex]} 0%, ${colors[secondaryColorIndex]} 100%)`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: size * 0.4,
+            fontWeight: 'bold',
+            color: 'white',
+            textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+            flexShrink: 0,
+            overflow: 'hidden'
+        }, children: address.slice(-2).toUpperCase() }));
+};

package/dist/components/ConnectButton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ConnectButton: React.FC;

package/dist/components/ConnectButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useAccount } from '../hooks.js';
+import { ConnectModal } from './ConnectModal.js';
+import { Avatar } from './Avatar.js';
+export const ConnectButton = () => {
+    const { isConnected, address, status } = useAccount();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const formatAddress = (addr) => {
+        return `${addr.slice(0, 8)}...${addr.slice(-4)}`;
+    };
+    if (isConnected && address) {
+        return (_jsxs(_Fragment, { children: [_jsxs("button", { className: "cc-pill", onClick: () => setIsModalOpen(true), children: [_jsx(Avatar, { address: address, size: 24 }), _jsx("span", { className: "cc-pill-text", children: formatAddress(address) })] }), _jsx(ConnectModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "cc-btn", onClick: () => setIsModalOpen(true), disabled: status === 'connecting', children: status === 'connecting' ? 'Connecting...' : 'Connect Wallet' }), _jsx(ConnectModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false) })] }));
+};

package/dist/components/ConnectModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ConnectModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export type ModalRoute = 'connectors' | 'about' | 'profile' | 'connecting';
+export declare const ConnectModal: React.FC<ConnectModalProps>;
+export {};

package/dist/components/ConnectModal.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useCosmos } from '../CosmosProvider.js';
+import { useConnect, useAccount } from '../hooks.js';
+import Connectors from './Pages/Connectors.js';
+import About from './Pages/About.js';
+import Profile from './Pages/Profile.js';
+import Connecting from './Pages/Connecting.js';
+export const ConnectModal = ({ isOpen, onClose }) => {
+    const { client } = useCosmos();
+    const { connect } = useConnect();
+    const { isConnected, status } = useAccount();
+    const [route, setRoute] = useState('connectors');
+    const [pendingWallet, setPendingWallet] = useState(null);
+    // Sync route with connection status
+    useEffect(() => {
+        if (isConnected) {
+            setRoute('profile');
+        }
+        else if (status === 'connecting') {
+            setRoute('connecting');
+        }
+        else if (!isOpen) {
+            setRoute('connectors');
+        }
+    }, [isConnected, status, isOpen]);
+    if (!isOpen)
+        return null;
+    const handleWalletSelect = async (wallet) => {
+        try {
+            setPendingWallet(wallet);
+            setRoute('connecting');
+            const chainId = client.getChains()[0]?.chainId || 'columbus-5';
+            await connect(wallet.id, chainId);
+        }
+        catch (error) {
+            console.error('Failed to connect:', error);
+            setRoute('connectors');
+        }
+    };
+    const showBackButton = route !== 'connectors' && route !== 'profile';
+    const showInfoButton = route === 'connectors';
+    const variants = {
+        initial: (direction) => ({
+            x: direction > 0 ? 50 : -50,
+            opacity: 0,
+        }),
+        animate: {
+            x: 0,
+            opacity: 1,
+        },
+        exit: (direction) => ({
+            x: direction < 0 ? 50 : -50,
+            opacity: 0,
+        }),
+    };
+    // Direction logic for transitions (simple for now)
+    const getDirection = (newRoute) => {
+        if (newRoute === 'about' || newRoute === 'connecting')
+            return 1;
+        return -1;
+    };
+    const renderPage = () => {
+        switch (route) {
+            case 'connectors':
+                return _jsx(Connectors, { onSelect: handleWalletSelect });
+            case 'about':
+                return _jsx(About, {});
+            case 'profile':
+                return _jsx(Profile, {});
+            case 'connecting':
+                return _jsx(Connecting, { wallet: pendingWallet, onCancel: () => setRoute('connectors') });
+            default:
+                return null;
+        }
+    };
+    const getTitle = () => {
+        switch (route) {
+            case 'profile': return 'Account';
+            case 'about': return 'About Wallets';
+            case 'connecting': return 'Requesting Connection';
+            default: return 'Connect Wallet';
+        }
+    };
+    return (_jsx("div", { className: "cc-modal-overlay", onClick: onClose, children: _jsxs(motion.div, { className: "cc-modal-content", onClick: (e) => e.stopPropagation(), initial: { scale: 0.95, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.95, opacity: 0 }, children: [_jsxs("div", { className: "cc-modal-header", children: [showBackButton ? (_jsx("button", { className: "cc-back-btn", onClick: () => setRoute('connectors'), children: "\u2190" })) : showInfoButton ? (_jsx("button", { className: "cc-help-btn", onClick: () => setRoute('about'), title: "About Wallets", children: "?" })) : _jsx("div", { style: { width: 28 } }), _jsx("span", { className: "cc-modal-title", children: getTitle() }), _jsx("button", { className: "cc-close-btn", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "cc-modal-body", children: _jsx(AnimatePresence, { exitBeforeEnter: true, initial: false, children: _jsx(motion.div, { custom: getDirection(route), variants: variants, initial: "initial", animate: "animate", exit: "exit", transition: { duration: 0.2, ease: "easeInOut" }, children: renderPage() }, route) }) })] }) }));
+};

package/dist/components/Pages/About.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const About: React.FC;
+export default About;

package/dist/components/Pages/About.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const About = () => {
+    return (_jsxs("div", { className: "cc-page-about", children: [_jsxs("div", { className: "cc-about-steps", children: [_jsxs("div", { className: "cc-about-step", children: [_jsx("div", { className: "cc-step-num", children: "1" }), _jsxs("div", { className: "cc-step-content", children: [_jsx("h4", { children: "Get a Wallet" }), _jsx("p", { children: "A wallet lets you connect to Terra Classic and manage your LUNC assets safely." })] })] }), _jsxs("div", { className: "cc-about-step", children: [_jsx("div", { className: "cc-step-num", children: "2" }), _jsxs("div", { className: "cc-step-content", children: [_jsx("h4", { children: "Add some LUNC" }), _jsx("p", { children: "You'll need some LUNC in your wallet to pay for gas fees on the Terra network." })] })] }), _jsxs("div", { className: "cc-about-step", children: [_jsx("div", { className: "cc-step-num", children: "3" }), _jsxs("div", { className: "cc-step-content", children: [_jsx("h4", { children: "Connect & Stake" }), _jsx("p", { children: "Connect your wallet to this app to start staking, voting, or trading." })] })] })] }), _jsx("button", { className: "cc-primary-btn", onClick: () => window.open('https://www.galaxy-station.app/', '_blank'), children: "Get Galaxy Station" })] }));
+};
+export default About;

package/dist/components/Pages/Connecting.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ConnectingProps {
+    wallet: any;
+    onCancel: () => void;
+}
+declare const Connecting: React.FC<ConnectingProps>;
+export default Connecting;

package/dist/components/Pages/Connecting.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Connecting = ({ wallet, onCancel }) => {
+    return (_jsx("div", { className: "cc-page-connecting", children: _jsxs("div", { className: "cc-connecting-view", children: [_jsxs("div", { className: "cc-spinner-container", children: [_jsx("div", { className: "cc-spinner" }), wallet?.icon && (_jsx("img", { src: wallet.icon, alt: "", className: "cc-spinner-icon" }))] }), _jsx("h3", { className: "cc-connecting-title", children: "Requesting Connection" }), _jsxs("p", { className: "cc-connecting-text", children: ["Open the ", wallet?.name || 'Wallet', " extension to continue."] }), _jsx("button", { className: "cc-footer-btn", onClick: onCancel, children: "Cancel" })] }) }));
+};
+export default Connecting;

package/dist/components/Pages/Connectors.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ConnectorsProps {
+    onSelect: (wallet: any) => void;
+}
+declare const Connectors: React.FC<ConnectorsProps>;
+export default Connectors;

package/dist/components/Pages/Connectors.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCosmos } from '../../CosmosProvider.js';
+const Connectors = ({ onSelect }) => {
+    const { client } = useCosmos();
+    const wallets = client.getWallets();
+    return (_jsx("div", { className: "cc-page-connectors", children: _jsx("div", { className: "cc-wallet-list", children: wallets.map((wallet) => (_jsxs("button", { className: "cc-wallet-item", onClick: () => onSelect(wallet), children: [_jsx("span", { children: wallet.name }), wallet.icon && _jsx("img", { src: wallet.icon, alt: wallet.name, className: "cc-wallet-icon" })] }, wallet.id))) }) }));
+};
+export default Connectors;

package/dist/components/Pages/Profile.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Profile: React.FC;
+export default Profile;

package/dist/components/Pages/Profile.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useCosmos } from '../../CosmosProvider.js';
+import { useAccount, useDisconnect, useBalance } from '../../hooks.js';
+import { Avatar } from '../Avatar.js';
+const Profile = () => {
+    const { client } = useCosmos();
+    const { address } = useAccount();
+    const { disconnect } = useDisconnect();
+    const { balance, isLoading: isBalanceLoading } = useBalance();
+    const [copyFeedback, setCopyFeedback] = useState(false);
+    const formatBalance = (bal) => {
+        if (!bal)
+            return '0.00 LUNC';
+        const amount = parseFloat(bal.amount) / 1000000;
+        return `${amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} LUNC`;
+    };
+    const handleCopy = () => {
+        if (address) {
+            navigator.clipboard.writeText(address);
+            setCopyFeedback(true);
+            setTimeout(() => setCopyFeedback(false), 2000);
+        }
+    };
+    if (!address)
+        return null;
+    return (_jsx("div", { className: "cc-page-profile", children: _jsxs("div", { className: "cc-profile-view", children: [_jsx("div", { className: "cc-profile-avatar", children: _jsx(Avatar, { address: address, size: 84 }) }), _jsxs("div", { className: "cc-profile-info", children: [_jsxs("h3", { className: "cc-profile-address", children: [address.slice(0, 12), "...", address.slice(-6)] }), _jsx("div", { className: "cc-profile-balance", children: isBalanceLoading ? 'Loading...' : formatBalance(balance) })] }), _jsxs("div", { className: "cc-profile-actions", children: [_jsx("button", { className: "cc-util-btn", onClick: handleCopy, children: copyFeedback ? 'Copied!' : 'Copy Address' }), _jsx("button", { className: "cc-util-btn", onClick: () => disconnect(), style: { color: '#ef4444' }, children: "Disconnect" })] }), _jsxs("div", { className: "cc-profile-footer", children: ["Connected to ", client.getChains()[0]?.chainId] })] }) }));
+};
+export default Profile;

package/dist/hooks.d.ts

@@ -0,0 +1,22 @@
+export declare const useAccount: () => {
+    address: any;
+    status: any;
+    isConnected: boolean;
+    isConnecting: boolean;
+    isDisconnected: boolean;
+    account: any;
+};
+export declare const useConnect: () => {
+    connect: (walletId: string, chainId: string) => Promise<any>;
+};
+export declare const useDisconnect: () => {
+    disconnect: () => Promise<any>;
+};
+export declare const useClient: () => Client;
+export declare const useBalance: () => {
+    balance: {
+        amount: string;
+        denom: string;
+    } | null;
+    isLoading: boolean;
+};

package/dist/hooks.js

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react';
+import { useCosmos } from './CosmosProvider.js';
+import { useCallback } from 'react';
+export const useAccount = () => {
+    const { state } = useCosmos();
+    return {
+        address: state.account?.address,
+        status: state.status,
+        isConnected: state.status === 'connected',
+        isConnecting: state.status === 'connecting',
+        isDisconnected: state.status === 'disconnected',
+        account: state.account,
+    };
+};
+export const useConnect = () => {
+    const { client } = useCosmos();
+    const connect = useCallback(async (walletId, chainId) => {
+        return client.connect(walletId, chainId);
+    }, [client]);
+    return { connect };
+};
+export const useDisconnect = () => {
+    const { client } = useCosmos();
+    const disconnect = useCallback(async () => {
+        return client.disconnect();
+    }, [client]);
+    return { disconnect };
+};
+export const useClient = () => {
+    const { client } = useCosmos();
+    return client;
+};
+export const useBalance = () => {
+    const { state } = useCosmos();
+    const [balance, setBalance] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        const address = state.account?.address;
+        const rest = state.currentChain?.rest;
+        if (address && rest) {
+            setIsLoading(true);
+            const fetchBalance = async () => {
+                try {
+                    const res = await fetch(`${rest}/cosmos/bank/v1beta1/balances/${address}/by_denom?denom=uluna`);
+                    const data = await res.json();
+                    setBalance(data.balance || { amount: '0', denom: 'uluna' });
+                }
+                catch (error) {
+                    console.error('Failed to fetch balance:', error);
+                }
+                finally {
+                    setIsLoading(false);
+                }
+            };
+            fetchBalance();
+        }
+        else {
+            setBalance(null);
+        }
+    }, [state.account?.address, state.currentChain]);
+    return { balance, isLoading };
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './CosmosProvider.js';
+export * from './hooks.js';
+export * from './components/ConnectButton.js';
+export * from './components/ConnectModal.js';
+export * from './components/Avatar.js';
+import './styles.css';

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from './CosmosProvider.js';
+export * from './hooks.js';
+export * from './components/ConnectButton.js';
+export * from './components/ConnectModal.js';
+export * from './components/Avatar.js';
+import './styles.css';

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "cosmos-connect-react",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "cosmos-connect-core": "*",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "cosmos-connect-core": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "framer-motion": "^6.5.1"
+  }
+}

package/src/CosmosProvider.tsx

@@ -0,0 +1,75 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  ReactNode,
+} from 'react';
+import {
+  Client,
+  ClientState,
+  createClient,
+  ClientConfig,
+  TERRA_CLASSIC,
+  KeplrWallet,
+  GalaxyStationWallet,
+  LeapWallet,
+  WalletConnectWallet,
+} from 'cosmos-connect-core';
+
+interface CosmosContextValue {
+  client: Client;
+  state: ClientState;
+}
+
+const CosmosContext = createContext<CosmosContextValue | null>(null);
+
+const DEFAULT_CONFIG: ClientConfig = {
+  chains: [TERRA_CLASSIC],
+  wallets: [
+    new GalaxyStationWallet(),
+    new KeplrWallet(),
+    new LeapWallet(),
+    new WalletConnectWallet({
+      projectId: '39190b939e067ecb6dccdb7c77653a42', // Default placeholder or instructions needed
+    }),
+  ],
+};
+
+export interface CosmosProviderProps {
+  children: ReactNode;
+  config?: Partial<ClientConfig>;
+}
+
+export const CosmosProvider: React.FC<CosmosProviderProps> = ({
+  children,
+  config,
+}) => {
+  const [client] = useState(() => {
+    const fullConfig: ClientConfig = {
+      chains: config?.chains || DEFAULT_CONFIG.chains,
+      wallets: config?.wallets || DEFAULT_CONFIG.wallets,
+      storage: config?.storage || DEFAULT_CONFIG.storage,
+    };
+    return createClient(fullConfig);
+  });
+  const [state, setState] = useState<ClientState>(client.state);
+
+  useEffect(() => {
+    return client.subscribe(setState);
+  }, [client]);
+
+  return (
+    <CosmosContext.Provider value={{ client, state }}>
+      {children}
+    </CosmosContext.Provider>
+  );
+};
+
+export const useCosmos = () => {
+  const context = useContext(CosmosContext);
+  if (!context) {
+    throw new Error('useCosmos must be used within a CosmosProvider');
+  }
+  return context;
+};

package/src/components/Avatar.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+interface AvatarProps {
+  address: string;
+  size?: number;
+}
+
+/**
+ * A simple, colorful avatar generated from the address.
+ * Mimics the ConnectKit/RainbowKit feel.
+ */
+export const Avatar: React.FC<AvatarProps> = ({ address, size = 32 }) => {
+  // Simple deterministic color generation from address
+  const colors = [
+    '#FFADAD', '#FFD6A5', '#FDFFB6', '#CAFFBF', 
+    '#9BF6FF', '#A0C4FF', '#BDB2FF', '#FFC6FF'
+  ];
+  
+  const getHash = (str: string) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return hash;
+  };
+  
+  const colorIndex = Math.abs(getHash(address)) % colors.length;
+  const secondaryColorIndex = (colorIndex + 3) % colors.length;
+
+  return (
+    <div 
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: `linear-gradient(135deg, ${colors[colorIndex]} 0%, ${colors[secondaryColorIndex]} 100%)`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: size * 0.4,
+        fontWeight: 'bold',
+        color: 'white',
+        textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+        flexShrink: 0,
+        overflow: 'hidden'
+      }}
+    >
+      {address.slice(-2).toUpperCase()}
+    </div>
+  );
+};

package/src/components/ConnectButton.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { useAccount } from '../hooks.js';
+import { ConnectModal } from './ConnectModal.js';
+import { Avatar } from './Avatar.js';
+
+export const ConnectButton: React.FC = () => {
+  const { isConnected, address, status } = useAccount();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const formatAddress = (addr: string) => {
+    return `${addr.slice(0, 8)}...${addr.slice(-4)}`;
+  };
+
+  if (isConnected && address) {
+    return (
+      <>
+        <button className="cc-pill" onClick={() => setIsModalOpen(true)}>
+          <Avatar address={address} size={24} />
+          <span className="cc-pill-text">{formatAddress(address)}</span>
+        </button>
+        <ConnectModal 
+          isOpen={isModalOpen} 
+          onClose={() => setIsModalOpen(false)} 
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <button 
+        className="cc-btn" 
+        onClick={() => setIsModalOpen(true)}
+        disabled={status === 'connecting'}
+      >
+        {status === 'connecting' ? 'Connecting...' : 'Connect Wallet'}
+      </button>
+      <ConnectModal 
+        isOpen={isModalOpen} 
+        onClose={() => setIsModalOpen(false)} 
+      />
+    </>
+  );
+};