Merge pull request #29 from Silk-Nodes/claude/unruffled-ride

Add Cosmostation wallet support

Author: Zoltan118

public/cosmostation-logo.png

@@ -380,6 +380,31 @@ export default function HomePage() {
                   </a>
                 )}
               </button>
+              <button
+                onClick={() => { setShowWalletModal(false); connect("cosmostation"); trackEvent("wallet_connect", { wallet_type: "cosmostation" }); }}
+                disabled={walletLoading}
+                style={{
+                  display: "flex", alignItems: "center", gap: 14, padding: "14px 18px",
+                  borderRadius: "var(--radius-md)", border: "1px solid var(--glass-border)",
+                  background: "var(--glass-bg)", cursor: "pointer", width: "100%",
+                  opacity: availableWallets.cosmostation ? 1 : 0.4, transition: "all 0.15s",
+                }}
+              >
+                <img src={`${BASE_PATH}/cosmostation-logo.png`} alt="Cosmostation wallet logo" style={{ width: 40, height: 40, borderRadius: 10 }} />
+                <div style={{ textAlign: "left" }}>
+                  <div style={{ fontWeight: 600, fontSize: "0.9rem" }}>Cosmostation</div>
+                  <div style={{ fontSize: "0.7rem", color: "var(--text-light)" }}>
+                    {availableWallets.cosmostation ? "Detected" : "Not installed"}
+                  </div>
+                </div>
+                {!availableWallets.cosmostation && (
+                  <a href="https://www.cosmostation.io/products/cosmostation_extension" target="_blank" rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    style={{ marginLeft: "auto", fontSize: "0.7rem", color: "var(--accent-olive)", textDecoration: "none", fontWeight: 600 }}>
+                    Install
+                  </a>
+                )}
+              </button>
             </div>
             <button
               onClick={() => setShowWalletModal(false)}

src/app/page.tsx

@@ -48,7 +48,7 @@ export function useWallet() {
     }
   }, [txResult]);
 
-  const connect = useCallback(async (walletType: "keplr" | "leap" = "keplr") => {
+  const connect = useCallback(async (walletType: "keplr" | "leap" | "cosmostation" = "keplr") => {
     setLoading(true);
     setError(null);
     try {
@@ -152,10 +152,10 @@ export function useWallet() {
 
     try {
       const wasConnected = localStorage.getItem("tx-wallet-connected");
-      const savedType = localStorage.getItem("tx-wallet-type") as "keplr" | "leap" | null;
+      const savedType = localStorage.getItem("tx-wallet-type") as "keplr" | "leap" | "cosmostation" | null;
       if (wasConnected === "true" && savedType) {
         const wallets = getAvailableWallets();
-        if ((savedType === "keplr" && wallets.keplr) || (savedType === "leap" && wallets.leap)) {
+        if ((savedType === "keplr" && wallets.keplr) || (savedType === "leap" && wallets.leap) || (savedType === "cosmostation" && wallets.cosmostation)) {
           connect(savedType);
         }
       }
@@ -173,12 +173,13 @@ export function useWallet() {
     };
 
     window.addEventListener("keplr_keystorechange", handleAccountChange);
-    // Leap uses the same event name
     window.addEventListener("leap_keystorechange", handleAccountChange);
+    window.addEventListener("cosmostation_keystorechange", handleAccountChange);
 
     return () => {
       window.removeEventListener("keplr_keystorechange", handleAccountChange);
       window.removeEventListener("leap_keystorechange", handleAccountChange);
+      window.removeEventListener("cosmostation_keystorechange", handleAccountChange);
     };
   }, [wallet.connected, wallet.walletType, connect]);
 
@@ -197,6 +198,6 @@ export function useWallet() {
     undelegate,
     clearError: () => setError(null),
     clearTxResult: () => setTxResult(null),
-    availableWallets: typeof window !== "undefined" ? getAvailableWallets() : { keplr: false, leap: false },
+    availableWallets: typeof window !== "undefined" ? getAvailableWallets() : { keplr: false, leap: false, cosmostation: false },
   };
 }

src/hooks/useWallet.ts

@@ -78,7 +78,7 @@ export interface WalletState {
   rewards: number;
   delegations: Delegation[];
   unbondingDelegations: UnbondingDelegation[];
-  walletType: "keplr" | "leap" | "";
+  walletType: "keplr" | "leap" | "cosmostation" | "";
 }
 
 export interface Delegation {

src/lib/types.ts

@@ -59,32 +59,40 @@ function resolveMoniker(valAddr: string): string {
 }
 
 // ── Detect available wallets ──
-export function getAvailableWallets(): { keplr: boolean; leap: boolean } {
-  if (typeof window === "undefined") return { keplr: false, leap: false };
+export function getAvailableWallets(): { keplr: boolean; leap: boolean; cosmostation: boolean } {
+  if (typeof window === "undefined") return { keplr: false, leap: false, cosmostation: false };
   return {
     keplr: !!(window as any).keplr,
     leap: !!(window as any).leap,
+    cosmostation: !!(window as any).cosmostation,
   };
 }
 
-// ── Get wallet provider (Keplr or Leap) ──
-function getWalletProvider(type: "keplr" | "leap") {
+// ── Get wallet provider (Keplr, Leap, or Cosmostation) ──
+function getWalletProvider(type: "keplr" | "leap" | "cosmostation") {
   if (typeof window === "undefined") return null;
   if (type === "leap") return (window as any).leap;
+  if (type === "cosmostation") {
+    // Cosmostation exposes a Keplr-compatible provider
+    const cosmostation = (window as any).cosmostation;
+    if (cosmostation?.providers?.keplr) return cosmostation.providers.keplr;
+    // Fallback: some versions expose it directly
+    return cosmostation;
+  }
   return (window as any).keplr;
 }
 
 /**
  * Connect wallet (Keplr or Leap) and return wallet state
  */
-export async function connectWallet(walletType: "keplr" | "leap" = "keplr"): Promise<WalletState> {
+export async function connectWallet(walletType: "keplr" | "leap" | "cosmostation" = "keplr"): Promise<WalletState> {
   if (typeof window === "undefined") {
     throw new Error("Window not available");
   }
 
   const provider = getWalletProvider(walletType);
   if (!provider) {
-    const name = walletType === "leap" ? "Leap" : "Keplr";
+    const name = walletType === "cosmostation" ? "Cosmostation" : walletType === "leap" ? "Leap" : "Keplr";
     throw new Error(
       `${name} wallet not found. Please install the ${name} browser extension.`
     );
@@ -240,7 +248,7 @@ async function fetchUnbondingDelegations(address: string): Promise<UnbondingDele
 export async function delegateTokens(
   validatorAddress: string,
   amount: number,
-  walletType: "keplr" | "leap" = "keplr"
+  walletType: "keplr" | "leap" | "cosmostation" = "keplr"
 ): Promise<string> {
   const provider = getWalletProvider(walletType);
   if (!provider) throw new Error(`${walletType} not available`);
@@ -278,7 +286,7 @@ export async function delegateTokens(
 export async function undelegateTokens(
   validatorAddress: string,
   amount: number,
-  walletType: "keplr" | "leap" = "keplr"
+  walletType: "keplr" | "leap" | "cosmostation" = "keplr"
 ): Promise<string> {
   const provider = getWalletProvider(walletType);
   if (!provider) throw new Error(`${walletType} not available`);
@@ -320,7 +328,7 @@ export async function undelegateTokens(
  */
 export async function claimAllRewards(
   delegations: Delegation[],
-  walletType: "keplr" | "leap" = "keplr"
+  walletType: "keplr" | "leap" | "cosmostation" = "keplr"
 ): Promise<string> {
   const provider = getWalletProvider(walletType);
   if (!provider) throw new Error(`${walletType} not available`);
@@ -377,7 +385,7 @@ export async function redelegateTokens(
   srcValidatorAddress: string,
   dstValidatorAddress: string,
   amount: number,
-  walletType: "keplr" | "leap" = "keplr"
+  walletType: "keplr" | "leap" | "cosmostation" = "keplr"
 ): Promise<string> {
   const provider = getWalletProvider(walletType);
   if (!provider) throw new Error(`${walletType} not available`);