feat: select spawn chain by default if it's running

hyperweb-io · Oct 9, 2024 · 2c00c33 · 2c00c33
1 parent 9aea9b6
commit 2c00c33
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 23 deletions.
diff --git a/examples/spawn/components/common/Header/ChainDropdown.tsx b/examples/spawn/components/common/Header/ChainDropdown.tsx
@@ -13,21 +13,23 @@ export const ChainDropdown = () => {
   const { chain } = useChain(selectedChain);
   const [input, setInput] = useState<string>(chain.pretty_name);
   const { isMobile } = useDetectBreakpoints();
-  const { data: spawnChains, refetch } = useSpawnChains();
+  const { data: spawnData, refetch, isLoading } = useSpawnChains();
 
   const [isChainsAdded, setIsChainsAdded] = useState(false);
   const { addChains, getChainLogo } = useManager();
 
   useEffect(() => {
-    if (
-      spawnChains?.chains?.length &&
-      spawnChains?.assets?.length &&
-      !isChainsAdded
-    ) {
-      addChains(spawnChains.chains, spawnChains.assets, getSignerOptions());
+    if (spawnData && !isChainsAdded) {
+      addChains(spawnData.chains, spawnData.assets, getSignerOptions());
       setIsChainsAdded(true);
     }
-  }, [spawnChains, isChainsAdded]);
+  }, [spawnData, isChainsAdded]);
+
+  useEffect(() => {
+    if (spawnData && !isLoading) {
+      chainStore.setSelectedChain(spawnData.chains[0].chain_name);
+    }
+  }, [isLoading]);
 
   const onOpenChange = (isOpen: boolean) => {
     if (isOpen && !isChainsAdded) {
@@ -36,9 +38,13 @@ export const ChainDropdown = () => {
   };
 
   const chains = isChainsAdded
-    ? chainOptions.concat(spawnChains?.chains ?? [])
+    ? chainOptions.concat(spawnData?.chains ?? [])
     : chainOptions;
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <Combobox
       onInputChange={(input) => {

diff --git a/examples/spawn/components/common/Header/Header.tsx b/examples/spawn/components/common/Header/Header.tsx
@@ -5,7 +5,7 @@ import { RxHamburgerMenu } from 'react-icons/rx';
 
 import { ChainDropdown } from './ChainDropdown';
 import { Button } from '../Button';
-import { useDetectBreakpoints } from '@/hooks';
+import { useDetectBreakpoints, useSpawnChains } from '@/hooks';
 import { AddressButton } from './AddressButton';
 
 interface HeaderProps {
@@ -15,6 +15,7 @@ interface HeaderProps {
 export const Header = ({ onOpenSidebar }: HeaderProps) => {
   const { theme, setTheme } = useTheme();
   const { isDesktop, isMobile } = useDetectBreakpoints();
+  const { isLoading } = useSpawnChains();
 
   const brandLogo = useColorModeValue(
     '/logos/brand-logo.svg',
@@ -45,7 +46,7 @@ export const Header = ({ onOpenSidebar }: HeaderProps) => {
         </Link>
       )}
       <Box display="flex" alignItems="center" gap="10px">
-        <AddressButton />
+        {!isLoading && <AddressButton />}
         <ChainDropdown />
         <Button
           leftIcon={theme === 'dark' ? 'moonLine' : 'sunLine'}

diff --git a/examples/spawn/hooks/common/useSpawnChains.ts b/examples/spawn/hooks/common/useSpawnChains.ts
@@ -13,13 +13,12 @@ export const useSpawnChains = () => {
           fetcher<AssetList>(SPAWN_ASSETS_URL),
         ]);
 
-        return {
-          chains: spawnChain ? [spawnChain] : [],
-          assets: spawnAssets ? [spawnAssets] : [],
-        };
+        return spawnChain && spawnAssets
+          ? { chains: [spawnChain], assets: [spawnAssets] }
+          : null;
       } catch (error) {
         console.error(error);
-        return undefined;
+        return null;
       }
     },
     staleTime: Infinity,

diff --git a/examples/spawn/pages/faucet.tsx b/examples/spawn/pages/faucet.tsx
@@ -15,13 +15,10 @@ export default function Faucet() {
   const { selectedChain } = useChainStore();
   const { address, chain } = useChain(selectedChain);
   const { toast } = useToast();
-  const { data: spawnChains } = useSpawnChains();
+  const { data: spawnData } = useSpawnChains();
 
   const checkIsChainSupported = () => {
-    const isSpawnRunning =
-      spawnChains?.chains?.length && spawnChains?.assets?.length;
-
-    if (!isSpawnRunning) {
+    if (!spawnData) {
       toast({
         type: 'error',
         title: 'Spawn is not running',
@@ -30,8 +27,8 @@ export default function Faucet() {
       return false;
     }
 
-    const isSpawnChain = spawnChains?.chains?.some(
-      (c) => c.chain_id === chain.chain_id,
+    const isSpawnChain = spawnData?.chains?.some(
+      (c) => c.chain_id === chain.chain_id
     );
 
     if (!isSpawnChain) {