From 8e96a48faabad0a82157c1bba5fef9c6d186c332 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Sat, 24 Aug 2024 23:33:31 +0800
Subject: [PATCH] feat: fetch spawn chains

---
 .../common/Header/ChainDropdown.tsx           | 13 +++---
 examples/chain-template-spawn/config/index.ts |  1 +
 examples/chain-template-spawn/config/spawn.ts | 11 +++++
 .../hooks/common/index.ts                     |  1 +
 .../hooks/common/useSpawnChains.ts            | 41 +++++++++++++++++++
 examples/chain-template-spawn/yarn.lock       |  4 +-
 6 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 examples/chain-template-spawn/config/spawn.ts
 create mode 100644 examples/chain-template-spawn/hooks/common/useSpawnChains.ts

diff --git a/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx b/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx
index fccb3e337..f195ccdb2 100644
--- a/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx
+++ b/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useChain, useManager } from '@cosmos-kit/react';
 import { Box, Combobox, Skeleton, Stack, Text } from '@interchain-ui/react';
 
-import { useStarshipChains, useDetectBreakpoints } from '@/hooks';
+import { useDetectBreakpoints, useSpawnChains } from '@/hooks';
 import { chainStore, useChainStore } from '@/contexts';
 import { chainOptions } from '@/config';
 
@@ -12,21 +12,20 @@ export const ChainDropdown = () => {
   const { chain } = useChain(selectedChain);
   const [input, setInput] = useState<string>(chain.pretty_name);
   const { isMobile } = useDetectBreakpoints();
-  const { data: starshipChains } = useStarshipChains();
+  const { data: spawnChains } = useSpawnChains();
 
   const [isChainsAdded, setIsChainsAdded] = useState(false);
   const { addChains, getChainLogo } = useManager();
 
   useEffect(() => {
-    if (starshipChains) {
-      // @ts-ignore
-      addChains(starshipChains.chains, starshipChains.assets);
+    if (spawnChains && !isChainsAdded) {
+      addChains(spawnChains.chains, spawnChains.assets);
       setIsChainsAdded(true);
     }
-  }, [starshipChains]);
+  }, [spawnChains, isChainsAdded]);
 
   const chains = isChainsAdded
-    ? chainOptions.concat(starshipChains?.chains ?? [])
+    ? chainOptions.concat(spawnChains?.chains ?? [])
     : chainOptions;
 
   return (
diff --git a/examples/chain-template-spawn/config/index.ts b/examples/chain-template-spawn/config/index.ts
index d3bb41e34..19d64541f 100644
--- a/examples/chain-template-spawn/config/index.ts
+++ b/examples/chain-template-spawn/config/index.ts
@@ -3,3 +3,4 @@ export * from './theme';
 export * from './wallets';
 export * from './products';
 export * from './breakpoints';
+export * from './spawn';
diff --git a/examples/chain-template-spawn/config/spawn.ts b/examples/chain-template-spawn/config/spawn.ts
new file mode 100644
index 000000000..d34af4023
--- /dev/null
+++ b/examples/chain-template-spawn/config/spawn.ts
@@ -0,0 +1,11 @@
+const api = {
+  baseUrl: 'http://127.0.0.1:8080',
+  endpoints: {
+    chain: '/chain_registry',
+    assets: '/chain_registry_assets',
+  },
+};
+
+export const SPAWN_API_BASE_URL = api.baseUrl;
+export const SPAWN_CHAIN_URL = `${api.baseUrl}${api.endpoints.chain}`;
+export const SPAWN_ASSETS_URL = `${api.baseUrl}${api.endpoints.assets}`;
diff --git a/examples/chain-template-spawn/hooks/common/index.ts b/examples/chain-template-spawn/hooks/common/index.ts
index e013bcb0a..37c7c60c6 100644
--- a/examples/chain-template-spawn/hooks/common/index.ts
+++ b/examples/chain-template-spawn/hooks/common/index.ts
@@ -6,3 +6,4 @@ export * from './useOutsideClick';
 export * from './useMediaQuery';
 export * from './useDetectBreakpoints';
 export * from './useStarshipChains';
+export * from './useSpawnChains';
diff --git a/examples/chain-template-spawn/hooks/common/useSpawnChains.ts b/examples/chain-template-spawn/hooks/common/useSpawnChains.ts
new file mode 100644
index 000000000..00c1b28da
--- /dev/null
+++ b/examples/chain-template-spawn/hooks/common/useSpawnChains.ts
@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+import { AssetList, Chain } from '@chain-registry/types';
+
+import { SPAWN_CHAIN_URL, SPAWN_ASSETS_URL } from '@/config';
+
+export const useSpawnChains = () => {
+  return useQuery({
+    queryKey: ['spawn-chains'],
+    queryFn: async () => {
+      try {
+        const [spawnChain, spawnAssets] = await Promise.all([
+          fetcher<Chain>(SPAWN_CHAIN_URL),
+          fetcher<AssetList>(SPAWN_ASSETS_URL),
+        ]);
+
+        return {
+          chains: spawnChain ? [spawnChain] : [],
+          assets: spawnAssets ? [spawnAssets] : [],
+        };
+      } catch (error) {
+        console.error(error);
+        return undefined;
+      }
+    },
+    staleTime: Infinity,
+    cacheTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+  });
+};
+
+const fetcher = async <T>(url: string): Promise<T | null> => {
+  try {
+    const response = await fetch(url);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
diff --git a/examples/chain-template-spawn/yarn.lock b/examples/chain-template-spawn/yarn.lock
index 407cd5402..1f07ee56d 100644
--- a/examples/chain-template-spawn/yarn.lock
+++ b/examples/chain-template-spawn/yarn.lock
@@ -802,9 +802,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cosmology/chain-template@workspace:.":
+"@cosmology/chain-template-spawn@workspace:.":
   version: 0.0.0-use.local
-  resolution: "@cosmology/chain-template@workspace:."
+  resolution: "@cosmology/chain-template-spawn@workspace:."
   dependencies:
     "@chain-registry/assets": "npm:1.63.5"
     "@chain-registry/osmosis": "npm:1.61.3"