feat: request tokens from spawn faucet

hyperweb-io · Aug 25, 2024 · 9308b23 · 9308b23
1 parent 8e96a48
commit 9308b23
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 35 deletions.
diff --git a/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx b/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx
@@ -12,18 +12,28 @@ export const ChainDropdown = () => {
   const { chain } = useChain(selectedChain);
   const [input, setInput] = useState<string>(chain.pretty_name);
   const { isMobile } = useDetectBreakpoints();
-  const { data: spawnChains } = useSpawnChains();
+  const { data: spawnChains, refetch } = useSpawnChains();
 
   const [isChainsAdded, setIsChainsAdded] = useState(false);
   const { addChains, getChainLogo } = useManager();
 
   useEffect(() => {
-    if (spawnChains && !isChainsAdded) {
+    if (
+      spawnChains?.chains?.length &&
+      spawnChains?.assets?.length &&
+      !isChainsAdded
+    ) {
       addChains(spawnChains.chains, spawnChains.assets);
       setIsChainsAdded(true);
     }
   }, [spawnChains, isChainsAdded]);
 
+  const onOpenChange = (isOpen: boolean) => {
+    if (isOpen && !isChainsAdded) {
+      refetch();
+    }
+  };
+
   const chains = isChainsAdded
     ? chainOptions.concat(spawnChains?.chains ?? [])
     : chainOptions;
@@ -33,6 +43,7 @@ export const ChainDropdown = () => {
       onInputChange={(input) => {
         setInput(input);
       }}
+      onOpenChange={onOpenChange}
       selectedKey={selectedChain}
       onSelectionChange={(key) => {
         const chainName = key as string | null;

diff --git a/examples/chain-template-spawn/pages/faucet.tsx b/examples/chain-template-spawn/pages/faucet.tsx
@@ -4,42 +4,40 @@ import { useChain } from '@cosmos-kit/react';
 
 import { Button } from '@/components';
 import { useChainStore } from '@/contexts';
-import { creditFromFaucet, validateChainAddress } from '@/utils';
-import { useStarshipChains, useToast } from '@/hooks';
-import config from '@/starship/configs/config.yaml';
-import type { StarshipConfig } from '@/starship';
+import { requestTokens, validateChainAddress } from '@/utils';
+import { useSpawnChains, useToast } from '@/hooks';
 
 export default function Faucet() {
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
   const { selectedChain } = useChainStore();
-  const { address, chain, assets } = useChain(selectedChain);
+  const { address, chain } = useChain(selectedChain);
   const { toast } = useToast();
-  const { data: starshipChains } = useStarshipChains();
+  const { data: spawnChains } = useSpawnChains();
 
   const checkIsChainSupported = () => {
-    const isStarshipRunning =
-      starshipChains?.chains?.length && starshipChains?.assets?.length;
+    const isSpawnRunning =
+      spawnChains?.chains?.length && spawnChains?.assets?.length;
 
-    if (!isStarshipRunning) {
+    if (!isSpawnRunning) {
       toast({
         type: 'error',
-        title: 'Starship is not running',
-        description: 'Faucet is only available in Starship environment',
+        title: 'Spawn is not running',
+        description: 'Faucet is only available in Spawn environment',
       });
       return false;
     }
 
-    const isStarshipChain = starshipChains?.chains?.some(
+    const isSpawnChain = spawnChains?.chains?.some(
       (c) => c.chain_id === chain.chain_id
     );
 
-    if (!isStarshipChain) {
+    if (!isSpawnChain) {
       toast({
         type: 'error',
         title: 'Chain is not supported',
-        description: 'Faucet is only available for Starship chains',
+        description: 'Faucet is only available for Spawn chains',
       });
       return false;
     }
@@ -52,17 +50,16 @@ export default function Faucet() {
     : null;
 
   const handleGetTokens = async () => {
-    if (!assets || !checkIsChainSupported()) return;
+    if (!address || !checkIsChainSupported()) return;
 
     setIsLoading(true);
 
-    const asset = assets.assets[0];
-    const port = (config as StarshipConfig).chains.find(
-      (c) => c.id === chain.chain_id
-    )!.ports.faucet;
-
     try {
-      await creditFromFaucet(input, asset.base, port);
+      const res = await requestTokens(chain.chain_id, address);
+      if (res.error) {
+        throw new Error(res.error);
+      }
+
       toast({
         type: 'success',
         title: 'Tokens credited',
@@ -79,7 +76,7 @@ export default function Faucet() {
     }
   };
 
-  const isButtonDisabled = !input || !!inputErrMsg;
+  const isButtonDisabled = !input || !!inputErrMsg || !address;
 
   return (
     <>

diff --git a/examples/chain-template-spawn/utils/faucet.ts b/examples/chain-template-spawn/utils/faucet.ts
@@ -1,6 +1,7 @@
 import { Asset, Chain } from '@chain-registry/types';
 import { ChainInfo, Currency } from '@keplr-wallet/types';
 import { fromBech32 } from '@cosmjs/encoding';
+import { SPAWN_API_BASE_URL } from '@/config';
 
 export const makeKeplrChainInfo = (chain: Chain, asset: Asset): ChainInfo => {
   const currency: Currency = {
@@ -48,23 +49,23 @@ export const makeKeplrChainInfo = (chain: Chain, asset: Asset): ChainInfo => {
   };
 };
 
-export const creditFromFaucet = async (
+export const requestTokens = async (
+  chainId: string,
   address: string,
-  denom: string,
-  port: number
+  amount: string = '1000000000'
 ) => {
-  const faucetEndpoint = `http://localhost:${port}/credit`;
-
-  await fetch(faucetEndpoint, {
+  const response = await fetch(SPAWN_API_BASE_URL, {
     method: 'POST',
     body: JSON.stringify({
-      address,
-      denom,
+      chain_id: chainId,
+      action: 'faucet',
+      cmd: `amount=${amount};address=${address}`,
     }),
-    headers: {
-      'Content-type': 'application/json',
-    },
   });
+
+  const data = await response.json();
+
+  return data;
 };
 
 export const validateChainAddress = (address: string, bech32Prefix: string) => {