doc: add "connect to spawn chains" guide

Author: marslavish

examples/chain-template-spawn/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 Spawn chains
+
+1. Follow the official guide to set up Spawn: https://github.com/rollchains/spawn
+2. Make sure the Spawn generated chain is up and running
+3. Go to `./config/spawn.ts` to edit the default Spawn chain config if needed
+4. Run `yarn dev` and open http://localhost:3000, select "Rollchain" (or other custom chain names) 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/common/Header/ChainDropdown.tsx

@@ -13,7 +13,7 @@ export const ChainDropdown = () => {
   const { chain } = useChain(selectedChain);
   const [input, setInput] = useState<string>(chain.pretty_name);
   const { isMobile } = useDetectBreakpoints();
-  const { data: starshipChains } = useStarshipChains();
+  const { data: starshipChains, refetch } = useStarshipChains();
 
   const [isChainsAdded, setIsChainsAdded] = useState(false);
   const { addChains, getChainLogo } = useManager();
@@ -33,6 +33,12 @@ export const ChainDropdown = () => {
     }
   }, [starshipChains, isChainsAdded]);
 
+  const onOpenChange = (isOpen: boolean) => {
+    if (isOpen && !isChainsAdded) {
+      refetch();
+    }
+  };
+
   const chains = isChainsAdded
     ? chainOptions.concat(starshipChains?.chains ?? [])
     : chainOptions;
@@ -42,6 +48,7 @@ export const ChainDropdown = () => {
       onInputChange={(input) => {
         setInput(input);
       }}
+      onOpenChange={onOpenChange}
       selectedKey={selectedChain}
       onSelectionChange={(key) => {
         const chainName = key as string | null;