doc: add "connect to starship chains" guide

Author: marslavish

examples/chain-template-spawn/components/voting/Voting.tsx

@@ -107,7 +107,9 @@ export function Voting({ chainName }: VotingProps) {
       alignItems="center"
       justifyContent="center"
     >
-      <Text fontSize="$lg">No proposals found</Text>
+      <Text fontSize="$md" color="$textSecondary" fontWeight="500">
+        No proposals found
+      </Text>
     </Box>
   );
 

examples/chain-template/README.md

@@ -12,43 +12,50 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-## Learn More 
+## How to connect to Starship chains
+
+1. Follow the official guide to set up Starship: https://docs.cosmology.zone/starship/get-started/step-1
+2. Run `yarn starship start` and wait until Starship is up and running
+3. Open a new terminal and run `yarn dev`
+4. Open http://localhost:3000, select "Osmosis Devnet" or "Cosmos Hub Devnet" from the chain dropdown in the top right corner then click "Connect Wallet" in the left sidebar to connect to the chain
+5. Go to "Faucet" to get some test tokens and enjoy!
+
+## Learn More
 
 ### Chain Registry
 
 The npm package for the Official Cosmos chain registry. Get chain and token data for you application.
 
-* https://github.com/cosmology-tech/chain-registry
+- https://github.com/cosmology-tech/chain-registry
 
 ### Cosmology Videos
 
 Checkout more videos for how to use various frontend tooling in the Cosmos!
 
-* https://cosmology.zone/learn
+- https://cosmology.zone/learn
 
 ### Cosmos Kit
 
 A wallet connector for the Cosmos ⚛️
 
-* https://github.com/cosmology-tech/cosmos-kit
+- https://github.com/cosmology-tech/cosmos-kit
 
 ### Telescope
 
 A "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs. Telescope is used to generate libraries for Cosmos blockchains. Simply point to your protobuffer files and create developer-friendly Typescript libraries for teams to build on your blockchain.
 
-* https://github.com/cosmology-tech/telescope
+- https://github.com/cosmology-tech/telescope
 
 🎥 [Checkout the Telescope video playlist](https://www.youtube.com/watch?v=n82MsLe82mk&list=PL-lMkVv7GZwyQaK6bp6kMdOS5mzosxytC) to learn how to use `telescope`!
 
 ### CosmWasm TS Codegen
 
 The quickest and easiest way to interact with CosmWasm Contracts. @cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code.
 
-* https://github.com/CosmWasm/ts-codegen
+- https://github.com/CosmWasm/ts-codegen
 
 🎥 [Checkout the CosmWasm/ts-codegen video playlist](https://www.youtube.com/watch?v=D_A5V2PfNLA&list=PL-lMkVv7GZwz1KO3jANwr5W4MoziruXwK) to learn how to use `ts-codegen`!
 
-
 ## Learn More about Next.js
 
 To learn more about Next.js, take a look at the following resources:
@@ -68,19 +75,18 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym
 
 Checkout these related projects:
 
-* [@cosmology/telescope](https://github.com/cosmology-tech/telescope) Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
-* [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.
-* [chain-registry](https://github.com/cosmology-tech/chain-registry) Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
-* [cosmos-kit](https://github.com/cosmology-tech/cosmos-kit) Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
-* [create-cosmos-app](https://github.com/cosmology-tech/create-cosmos-app) Set up a modern Cosmos app by running one command.
-* [interchain-ui](https://github.com/cosmology-tech/interchain-ui) The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
-* [starship](https://github.com/cosmology-tech/starship) Unified Testing and Development for the Interchain.
+- [@cosmology/telescope](https://github.com/cosmology-tech/telescope) Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
+- [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.
+- [chain-registry](https://github.com/cosmology-tech/chain-registry) Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
+- [cosmos-kit](https://github.com/cosmology-tech/cosmos-kit) Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
+- [create-cosmos-app](https://github.com/cosmology-tech/create-cosmos-app) Set up a modern Cosmos app by running one command.
+- [interchain-ui](https://github.com/cosmology-tech/interchain-ui) The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
+- [starship](https://github.com/cosmology-tech/starship) Unified Testing and Development for the Interchain.
 
 ## Credits
 
 🛠 Built by Cosmology — if you like our tools, please consider delegating to [our validator ⚛️](https://cosmology.zone/validator)
 
-
 ## Disclaimer
 
 AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.

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

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useChain } from '@cosmos-kit/react';
 import { ChainName } from 'cosmos-kit';
 import { Box, Spinner, Text } from '@interchain-ui/react';
@@ -15,6 +16,10 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
     data?.allValidators || [],
   );
 
+  useEffect(() => {
+    refetch();
+  }, []);
+
   return (
     <Box my="$16" maxWidth="$containerMd" mx="auto">
       {!isWalletConnected ? (

examples/chain-template/components/voting/Voting.tsx

@@ -98,52 +98,74 @@ export function Voting({ chainName }: VotingProps) {
     setTitle(`#${proposal.id?.toString()} ${proposal?.title}`);
   }
 
+  const empty = (
+    <Box
+      height="$24"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Text fontSize="$md" color="$textSecondary" fontWeight="500">
+        No proposals found
+      </Text>
+    </Box>
+  );
+
   const content = (
     <Box mt="$12">
-      {data.proposals?.map((proposal, index) => {
-        let tally = proposal.finalTallyResult;
-        if (proposal.status === ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD) {
-          tally = tallies[proposal.id.toString()];
-        }
-        return (
-          <Box
-            my="$8"
-            key={proposal.id?.toString() || index}
-            position="relative"
-            attributes={{ onClick: () => onClickProposal(index) }}
-          >
-            {data.votes[proposal.id.toString()] ? (
+      {data.proposals?.length === 0
+        ? empty
+        : data.proposals?.map((proposal, index) => {
+            let tally = proposal.finalTallyResult;
+            if (
+              proposal.status === ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD
+            ) {
+              tally = tallies[proposal.id.toString()];
+            }
+            return (
               <Box
-                position="absolute"
-                px="$4"
-                py="$2"
-                top="$4"
-                right="$6"
-                borderRadius="$md"
-                backgroundColor="$green400"
+                my="$8"
+                key={proposal.id?.toString() || index}
+                position="relative"
+                attributes={{ onClick: () => onClickProposal(index) }}
               >
-                <Text color="$white" fontSize="$xs" fontWeight="$bold">
-                  Voted
-                </Text>
+                {data.votes[proposal.id.toString()] ? (
+                  <Box
+                    position="absolute"
+                    px="$4"
+                    py="$2"
+                    top="$4"
+                    right="$6"
+                    borderRadius="$md"
+                    backgroundColor="$green400"
+                  >
+                    <Text color="$white" fontSize="$xs" fontWeight="$bold">
+                      Voted
+                    </Text>
+                  </Box>
+                ) : null}
+                <GovernanceProposalItem
+                  id={`# ${proposal.id?.toString()}`}
+                  key={proposal.submitTime?.getTime()}
+                  // @ts-ignore
+                  title={proposal.content?.title || proposal.title || ''}
+                  status={status(proposal.status)}
+                  votes={votes(tally!)}
+                  endTime={formatDate(proposal.votingEndTime)!}
+                />
               </Box>
-            ) : null}
-            <GovernanceProposalItem
-              id={`# ${proposal.id?.toString()}`}
-              key={proposal.submitTime?.getTime()}
-              // @ts-ignore
-              title={proposal.content?.title || proposal.title || ''}
-              status={status(proposal.status)}
-              votes={votes(tally!)}
-              endTime={formatDate(proposal.votingEndTime)!}
-            />
-          </Box>
-        );
-      })}
+            );
+          })}
     </Box>
   );
 
   const connect = (
-    <Box mt="$8" display="flex" alignItems="center" justifyContent="center">
+    <Box
+      height="$24"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
       <Text fontSize="$lg">
         Please connect to your wallet to see the proposals.
       </Text>