feat: restrict cosmos-specific features to cosmos chains only

- Add chain type validation in StakingSection, AssetListSection, and Contract pages
- Display user-friendly messages when features are unavailable for non-cosmos chains
- Improve UX by clearly indicating feature compatibility

Author: sdqede

templates/chain-template/components/asset-list/AssetListSection.tsx

@@ -11,9 +11,37 @@ interface AssetListSectionProps {
 }
 
 export const AssetListSection = ({ chainName }: AssetListSectionProps) => {
-  const { address } = useChain(chainName);
+  const { address, chain } = useChain(chainName);
   const { data, isLoading, refetch } = useAssets(chainName);
 
+  if (chain && chain.chainType !== 'cosmos') {
+    return (
+      <Box maxWidth="768px" marginX="auto" marginBottom="60px">
+        <Text
+          fontSize="$xl"
+          fontWeight="$semibold"
+          attributes={{ marginBottom: '$10' }}
+        >
+          My assets
+        </Text>
+
+        <Box
+          height="160px"
+          bg="$cardBg"
+          borderRadius="$md"
+          p="$6"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text fontSize="$md" color="$textSecondary" textAlign="center">
+            Asset list functionality is not available for {chain.chainType} chains
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
   if (!address) {
     return (
       <Box maxWidth="768px" marginX="auto" marginBottom="60px">

templates/chain-template/components/staking/StakingSection.tsx

@@ -7,7 +7,8 @@ import { AllValidators } from './AllValidators';
 import { useStakingData, useValidatorLogos } from '@/hooks';
 
 export const StakingSection = ({ chainName }: { chainName: string }) => {
-  const { address } = useChain(chainName);
+  const { address, chain } = useChain(chainName);
+  console.log('chain', chain, chain.chainType);
   const { data, isLoading, refetch } = useStakingData(chainName);
   const { data: logos, isLoading: isFetchingLogos } = useValidatorLogos(
     chainName,
@@ -16,7 +17,18 @@ export const StakingSection = ({ chainName }: { chainName: string }) => {
 
   return (
     <Box my="$16" maxWidth="$containerMd" mx="auto">
-      {!address ? (
+      {chain && chain.chainType !== 'cosmos' ? (
+        <Box
+          height="$28"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text fontWeight="$semibold" fontSize="$xl" textAlign="center">
+            Staking functionality is not available for {chain.chainType} chains
+          </Text>
+        </Box>
+      ) : !address ? (
         <Box
           height="$28"
           display="flex"

templates/chain-template/package.json

@@ -29,8 +29,8 @@
     "@interchain-kit/react": "0.3.36",
     "@interchain-ui/react": "1.23.31",
     "@interchain-ui/react-no-ssr": "0.1.2",
-    "@interchainjs/cosmos": "^1.11.2",
-    "@interchainjs/react": "^1.11.2",
+    "@interchainjs/cosmos": "1.11.2",
+    "@interchainjs/react": "1.11.2",
     "@keplr-wallet/cosmos": "^0.12.44",
     "@tanstack/react-query": "4.32.0",
     "ace-builds": "1.35.0",

templates/chain-template/pages/contract.tsx

@@ -1,9 +1,11 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { Box, Tabs } from '@interchain-ui/react';
+import { Box, Tabs, Text } from '@interchain-ui/react';
 import { useRouter } from 'next/router';
+import { useChain } from '@interchain-kit/react';
 
 import { ExecuteTab, MyContractsTab, QueryTab } from '@/components';
 import { splitCamelCase, toKebabCase, toPascalCase } from '@/utils';
+import { useChainStore } from '@/contexts';
 import styles from '@/styles/comp.module.css';
 
 export enum TabLabel {
@@ -14,6 +16,8 @@ export enum TabLabel {
 
 export default function Contract() {
   const router = useRouter();
+  const { selectedChain } = useChainStore();
+  const { chain } = useChain(selectedChain);
   const [activeTab, setActiveTab] = useState<TabLabel>(TabLabel.MyContracts);
   const [queryAddress, setQueryAddress] = useState('');
   const [executeAddress, setExecuteAddress] = useState('');
@@ -64,8 +68,8 @@ export default function Contract() {
         tabId === TabLabel.Query
           ? queryAddress
           : tabId === TabLabel.Execute
-          ? executeAddress
-          : undefined
+            ? executeAddress
+            : undefined
       );
     },
     [updateUrl, queryAddress, executeAddress]
@@ -90,6 +94,21 @@ export default function Contract() {
     [activeTab, updateUrl]
   );
 
+  if (chain && chain.chainType !== 'cosmos') {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        minHeight="400px"
+      >
+        <Text fontWeight="$semibold" fontSize="$xl" textAlign="center">
+          Contract functionality is not available for {chain.chainType} chains
+        </Text>
+      </Box>
+    );
+  }
+
   return (
     <>
       <Tabs

templates/chain-template/pages/governance.tsx

@@ -1,9 +1,27 @@
 import { ReactNoSSR } from '@interchain-ui/react-no-ssr';
 import { Voting } from '@/components';
 import { useChainStore } from '@/contexts';
+import { useChain } from '@interchain-kit/react';
+import { Box, Text } from '@interchain-ui/react';
 
 export default function GovernancePage() {
   const { selectedChain } = useChainStore();
+  const { chain } = useChain(selectedChain);
+
+  if (chain && chain.chainType !== 'cosmos') {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        minHeight="400px"
+      >
+        <Text fontWeight="$semibold" fontSize="$xl" textAlign="center">
+          Governance functionality is not available for {chain.chainType} chains
+        </Text>
+      </Box>
+    );
+  }
 
   return (
     <ReactNoSSR>