cosmos-connect-react 0.1.1 → 0.1.3

package/dist/hooks.d.ts

@@ -1,18 +1,18 @@
 export declare const useAccount: () => {
-    address: any;
-    status: any;
+    address: string | undefined;
+    status: import("cosmos-connect-core").ClientStatus;
     isConnected: boolean;
     isConnecting: boolean;
     isDisconnected: boolean;
-    account: any;
+    account: import("cosmos-connect-core").Account | null;
 };
 export declare const useConnect: () => {
-    connect: (walletId: string, chainId: string) => Promise<any>;
+    connect: (walletId: string, chainId: string) => Promise<void>;
 };
 export declare const useDisconnect: () => {
-    disconnect: () => Promise<any>;
+    disconnect: () => Promise<void>;
 };
-export declare const useClient: () => Client;
+export declare const useClient: () => import("cosmos-connect-core").Client;
 export declare const useBalance: () => {
     balance: {
         amount: string;

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "cosmos-connect-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc && cp src/styles.css dist/"
   },
   "peerDependencies": {
     "cosmos-connect-core": "*",

package/src/CosmosProvider.tsx

@@ -1,75 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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)} 
-      />
-    </>
-  );
-};

package/src/components/ConnectModal.tsx

@@ -1,138 +0,0 @@
-import React, { 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';
-
-interface ConnectModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export type ModalRoute = 'connectors' | 'about' | 'profile' | 'connecting';
-
-export const ConnectModal: React.FC<ConnectModalProps> = ({ isOpen, onClose }) => {
-  const { client } = useCosmos();
-  const { connect } = useConnect();
-  const { isConnected, status } = useAccount();
-
-  const [route, setRoute] = useState<ModalRoute>('connectors');
-  const [pendingWallet, setPendingWallet] = useState<any>(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: any) => {
-    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: number) => ({
-      x: direction > 0 ? 50 : -50,
-      opacity: 0,
-    }),
-    animate: {
-      x: 0,
-      opacity: 1,
-    },
-    exit: (direction: number) => ({
-      x: direction < 0 ? 50 : -50,
-      opacity: 0,
-    }),
-  };
-
-  // Direction logic for transitions (simple for now)
-  const getDirection = (newRoute: ModalRoute) => {
-    if (newRoute === 'about' || newRoute === 'connecting') return 1;
-    return -1;
-  };
-
-  const renderPage = () => {
-    switch (route) {
-      case 'connectors':
-        return <Connectors onSelect={handleWalletSelect} />;
-      case 'about':
-        return <About />;
-      case 'profile':
-        return <Profile />;
-      case 'connecting':
-        return <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 (
-    <div className="cc-modal-overlay" onClick={onClose}>
-      <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 }}
-      >
-        <div className="cc-modal-header">
-          {showBackButton ? (
-            <button className="cc-back-btn" onClick={() => setRoute('connectors')}>←</button>
-          ) : showInfoButton ? (
-            <button className="cc-help-btn" onClick={() => setRoute('about')} title="About Wallets">?</button>
-          ) : <div style={{ width: 28 }} />}
-          
-          <span className="cc-modal-title">{getTitle()}</span>
-          
-          <button className="cc-close-btn" onClick={onClose}>&times;</button>
-        </div>
-
-        <div className="cc-modal-body">
-          <AnimatePresence exitBeforeEnter initial={false}>
-            <motion.div
-              key={route}
-              custom={getDirection(route)}
-              variants={variants}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              transition={{ duration: 0.2, ease: "easeInOut" }}
-            >
-              {renderPage()}
-            </motion.div>
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};

package/src/components/Pages/About.tsx

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

package/src/components/Pages/Connecting.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-interface ConnectingProps {
-  wallet: any;
-  onCancel: () => void;
-}
-
-const Connecting: React.FC<ConnectingProps> = ({ wallet, onCancel }) => {
-  return (
-    <div className="cc-page-connecting">
-      <div className="cc-connecting-view">
-        <div className="cc-spinner-container">
-          <div className="cc-spinner"></div>
-          {wallet?.icon && (
-            <img src={wallet.icon} alt="" className="cc-spinner-icon" />
-          )}
-        </div>
-        <h3 className="cc-connecting-title">Requesting Connection</h3>
-        <p className="cc-connecting-text">
-          Open the {wallet?.name || 'Wallet'} extension to continue.
-        </p>
-        <button className="cc-footer-btn" onClick={onCancel}>
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Connecting;

package/src/components/Pages/Connectors.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useCosmos } from '../../CosmosProvider.js';
-
-interface ConnectorsProps {
-  onSelect: (wallet: any) => void;
-}
-
-const Connectors: React.FC<ConnectorsProps> = ({ onSelect }) => {
-  const { client } = useCosmos();
-  const wallets = client.getWallets();
-
-  return (
-    <div className="cc-page-connectors">
-      <div className="cc-wallet-list">
-        {wallets.map((wallet) => (
-          <button 
-            key={wallet.id} 
-            className="cc-wallet-item"
-            onClick={() => onSelect(wallet)}
-          >
-            <span>{wallet.name}</span>
-            {wallet.icon && <img src={wallet.icon} alt={wallet.name} className="cc-wallet-icon" />}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Connectors;

package/src/components/Pages/Profile.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-import { useCosmos } from '../../CosmosProvider.js';
-import { useAccount, useDisconnect, useBalance } from '../../hooks.js';
-import { Avatar } from '../Avatar.js';
-
-const Profile: React.FC = () => {
-  const { client } = useCosmos();
-  const { address } = useAccount();
-  const { disconnect } = useDisconnect();
-  const { balance, isLoading: isBalanceLoading } = useBalance();
-  const [copyFeedback, setCopyFeedback] = useState(false);
-
-  const formatBalance = (bal: { amount: string; denom: string } | null) => {
-    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 (
-    <div className="cc-page-profile">
-      <div className="cc-profile-view">
-        <div className="cc-profile-avatar">
-          <Avatar address={address} size={84} />
-        </div>
-        
-        <div className="cc-profile-info">
-          <h3 className="cc-profile-address">
-            {address.slice(0, 12)}...{address.slice(-6)}
-          </h3>
-          <div className="cc-profile-balance">
-            {isBalanceLoading ? 'Loading...' : formatBalance(balance)}
-          </div>
-        </div>
-
-        <div className="cc-profile-actions">
-          <button className="cc-util-btn" onClick={handleCopy}>
-            {copyFeedback ? 'Copied!' : 'Copy Address'}
-          </button>
-          <button 
-            className="cc-util-btn" 
-            onClick={() => disconnect()}
-            style={{ color: '#ef4444' }}
-          >
-            Disconnect
-          </button>
-        </div>
-        
-        <div className="cc-profile-footer">
-          Connected to {client.getChains()[0]?.chainId}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Profile;

package/src/hooks.ts

@@ -1,73 +0,0 @@
-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: string, chainId: string) => {
-    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<{ amount: string; denom: string } | null>(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/src/index.ts

@@ -1,6 +0,0 @@
-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/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "declaration": true,
-    "outDir": "./dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx",
-    "lib": ["dom", "dom.iterable", "esnext"]
-  },
-  "include": ["src/**/*"]
-}