Fix/faucet and rest

CHANGELOG.md

@@ -77,6 +77,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#403](https://github.com/alleslabs/celatone-frontend/pull/403) Retrieve faucet information from api and use api instead of lcd to prevent CORS
 - [#395](https://github.com/alleslabs/celatone-frontend/pull/395) Disable wasm related tabs on the account detail page
 - [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Fix format denom function
 - [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix minor styling

src/config/index.ts

@@ -100,8 +100,6 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       faucet: {
         enabled: true,
         url: "https://faucet.alleslabs.dev",
-        denom: "osmo",
-        amount: 10,
       },
       wasm: {
         enabled: true,
@@ -147,8 +145,6 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       faucet: {
         enabled: true,
         url: "http://localhost:5005/request",
-        denom: "osmo",
-        amount: 10,
       },
       wasm: {
         enabled: true,

src/config/types.ts

@@ -4,8 +4,6 @@ type FaucetConfig =
   | {
       enabled: true;
       url: string;
-      denom: string;
-      amount: number;
     }
   | { enabled: false };
 

src/lib/app-provider/hooks/useBaseApiRoute.ts

@@ -9,6 +9,7 @@ export const useBaseApiRoute = (
     | "contracts"
     | "codes"
     | "accounts"
+    | "rest"
 ): string => {
   const {
     chainConfig: { chain, api },
@@ -33,6 +34,8 @@ export const useBaseApiRoute = (
       return `${api}/codes/${chain}/${currentChainId}`;
     case "accounts":
       return `${api}/accounts/${chain}/${currentChainId}`;
+    case "rest":
+      return `${api}/rest/${chain}/${currentChainId}`;
     default:
       throw new Error(
         "Error retrieving chain, api, or currentChainId from chain config."

src/lib/app-provider/queries/simulateFee.ts

@@ -66,7 +66,7 @@ export const useSimulateFeeQuery = ({
     queryFn: async ({ queryKey }) => simulateFn(queryKey[3] as ComposedMsg[]),
     enabled,
     keepPreviousData: true,
-    retry: false,
+    retry: 2,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
     onSuccess,

src/lib/components/ContractSelectSection.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
-import { useCelatoneApp, useLCDEndpoint, useMobile } from "lib/app-provider";
+import { useBaseApiRoute, useCelatoneApp, useMobile } from "lib/app-provider";
 import { useContractStore } from "lib/providers/store";
 import { queryInstantiateInfo } from "lib/services/contract";
 import type { ContractLocalInfo } from "lib/stores/contract";
@@ -134,7 +134,7 @@ export const ContractSelectSection = observer(
     const { getContractLocalInfo } = useContractStore();
     const { indexerGraphClient } = useCelatoneApp();
     const isMobile = useMobile();
-    const lcdEndpoint = useLCDEndpoint();
+    const lcdEndpoint = useBaseApiRoute("rest");
 
     const contractLocalInfo = getContractLocalInfo(contractAddress);
     const {

src/lib/components/modal/code/SaveNewCode.tsx

@@ -5,9 +5,9 @@ import { useEffect, useMemo, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput, NumberInput } from "lib/components/forms";
@@ -60,7 +60,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const toast = useToast();
   const { isCodeIdSaved, saveNewCode, updateCodeInfo, getCodeLocalInfo } =
     useCodeStore();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { refetch, isFetching, isRefetching } = useQuery(
     ["query", lcdEndpoint, codeId],

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -7,8 +7,8 @@ import { useForm } from "react-hook-form";
 
 import { ActionModal } from "../ActionModal";
 import {
+  useBaseApiRoute,
   useCelatoneApp,
-  useLCDEndpoint,
   useValidateAddress,
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
@@ -41,7 +41,7 @@ export function SaveNewContractModal({
   list,
   buttonProps,
 }: SaveNewContractModalProps) {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { indexerGraphClient } = useCelatoneApp();
   const { getContractLocalInfo } = useContractStore();

src/lib/components/select-contract/SelectContractInstantiator.tsx

@@ -19,8 +19,8 @@ import { useState } from "react";
 
 import { CustomIcon } from "../icon";
 import {
+  useBaseApiRoute,
   useCelatoneApp,
-  useLCDEndpoint,
   useValidateAddress,
 } from "lib/app-provider";
 import { DEFAULT_RPC_ERROR } from "lib/data";
@@ -63,7 +63,7 @@ export const SelectContractInstantiator = ({
   const contractLists = [instantiatedListInfo, ...getContractLists()];
   const contractList = contractLists.find((item) => item.slug === listSlug);
 
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const resetOnClose = () => {
     setListSlug("");

src/lib/hooks/useQueryCmds.ts

@@ -2,13 +2,13 @@ import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { useState } from "react";
 
-import { useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
 import { queryData } from "lib/services/contract";
 import type { ContractAddr, RpcQueryError } from "lib/types";
 
 export const useQueryCmds = (contractAddress: ContractAddr) => {
   const [queryCmds, setQueryCmds] = useState<[string, string][]>([]);
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { isFetching } = useQuery(
     ["query", "cmds", lcdEndpoint, contractAddress, '{"": {}}'],

src/lib/model/code.ts

@@ -2,9 +2,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import type { PermissionFilterValue } from "lib/hooks";
 import {
@@ -50,7 +50,7 @@ export interface CodeDataState {
 
 export const useCodeData = (codeId: string): CodeDataState => {
   const { currentChainId } = useCelatoneApp();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { data: codeInfo, isLoading } = useCodeDataByCodeId(codeId);
   const { data: publicCodeInfo } = usePublicProjectByCodeId(codeId);
@@ -62,9 +62,9 @@ export const useCodeData = (codeId: string): CodeDataState => {
     isLoading: isLcdCodeLoading,
     error: isLcdCodeError,
   } = useQuery(
-    ["query", "code_data", endpoint, codeId],
-    async () => getCodeIdInfo(endpoint, codeId),
-    { enabled: Boolean(endpoint) && Boolean(codeId), retry: false }
+    ["query", "code_data", lcdEndpoint, codeId],
+    async () => getCodeIdInfo(lcdEndpoint, codeId),
+    { enabled: Boolean(lcdEndpoint) && Boolean(codeId), retry: false }
   );
 
   return {

src/lib/model/contract.ts

@@ -4,7 +4,6 @@ import {
   useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import { DEFAULT_TX_FILTERS, INSTANTIATED_LIST_NAME } from "lib/data";
 import { useCodeStore, useContractStore } from "lib/providers/store";
@@ -99,7 +98,7 @@ export const useContractData = (
   const { indexerGraphClient, currentChainId } = useCelatoneApp();
   const { getCodeLocalInfo } = useCodeStore();
   const { getContractLocalInfo } = useContractStore();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { assetInfos } = useAssetInfos();
   const { data: publicInfo } =

src/lib/pages/admin/index.tsx

@@ -10,11 +10,11 @@ import {
   useInternalNavigate,
   useSimulateFeeQuery,
   useUpdateAdminTx,
-  useLCDEndpoint,
   useGetAddressType,
   useValidateAddress,
   useWasmConfig,
   useCurrentChain,
+  useBaseApiRoute,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -44,7 +44,7 @@ const UpdateAdmin = () => {
   const fabricateFee = useFabricateFee();
   const updateAdminTx = useUpdateAdminTx();
   const { broadcast } = useTxBroadcast();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { indexerGraphClient } = useCelatoneApp();
 

src/lib/pages/block-details/components/BlockDetailsTop.tsx

@@ -7,7 +7,7 @@ import {
   Button,
 } from "@chakra-ui/react";
 
-import { useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
 import { DotSeparator } from "lib/components/DotSeparator";
@@ -30,7 +30,7 @@ interface BlockDetailsTopProps {
 
 export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const block = Number(blockData.height);
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
   const openLcdPage = () =>
     openNewTab(
       `${lcdEndpoint}/cosmos/base/tendermint/v1beta1/blocks/${blockData.height}`

src/lib/pages/faucet/index.tsx

@@ -25,6 +25,7 @@ import type { IconKeys } from "lib/components/icon";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { useOpenTxTab } from "lib/hooks";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { useFaucetInfo } from "lib/services/faucetService";
 
 type ResultStatus = "success" | "error" | "warning";
 
@@ -55,6 +56,7 @@ const Faucet = () => {
     chainConfig: { prettyName },
   } = useCelatoneApp();
   const faucet = useFaucetConfig({ shouldRedirect: true });
+  const { data: faucetInfo } = useFaucetInfo();
 
   const { faucetUrl, faucetDenom, faucetAmount } = useMemo(() => {
     if (!faucet.enabled)
@@ -67,11 +69,11 @@ const Faucet = () => {
 
     return {
       faucetUrl: faucet.url,
-      faucetDenom: faucet.denom.toUpperCase(),
-      faucetAmount: faucet.amount,
+      faucetDenom: faucetInfo?.formattedDenom ?? "token",
+      faucetAmount: faucetInfo?.formattedAmount,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [faucet.enabled]);
+  }, [faucet.enabled, faucetInfo]);
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);
@@ -124,7 +126,11 @@ const Faucet = () => {
         setIsLoading(false);
         setResult({
           status: "success",
-          message: `Sent ${faucetAmount} testnet ${faucetDenom} from the faucet. You will need to wait for another hour to request again.`,
+          message: `Sent ${faucetAmount} testnet ${faucetDenom} from the faucet. ${
+            faucetInfo?.RateLimit
+              ? "You will need to wait for another hour to request again."
+              : ""
+          }`,
           txHash,
         });
       })
@@ -163,8 +169,8 @@ const Faucet = () => {
       </Heading>
       <Text variant="body2" color="text.dark" pt={4} textAlign="center" mb={8}>
         The faucet provides {faucetAmount} testnet {faucetDenom} per request.
-        Requests are limited to once per hour for each receiving address and IP
-        address.
+        {faucetInfo?.RateLimit &&
+          "Requests are limited to once per hour for each receiving address and IP address."}
       </Text>
       <TextInput
         variant="floating"
@@ -210,6 +216,7 @@ const Faucet = () => {
               variant="unstyled"
               minW="unset"
               size="sm"
+              ml="auto"
               _hover={{ background: "success.dark" }}
               style={{ padding: "4px 12px" }}
               onClick={() => openTxTab(result.txHash)}

src/lib/pages/instantiate/instantiate.tsx

@@ -11,9 +11,9 @@ import {
   useSimulateFee,
   useInstantiateTx,
   useCelatoneApp,
-  useLCDEndpoint,
   useValidateAddress,
   useCurrentChain,
+  useBaseApiRoute,
 } from "lib/app-provider";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -72,7 +72,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     },
   } = useCelatoneApp();
   const { address = "" } = useCurrentChain();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const postInstantiateTx = useInstantiateTx();
   const { simulate } = useSimulateFee();

src/lib/pages/migrate/components/MigrateContract.tsx

@@ -8,8 +8,8 @@ import { useForm } from "react-hook-form";
 import {
   useFabricateFee,
   useSimulateFeeQuery,
-  useLCDEndpoint,
   useCurrentChain,
+  useBaseApiRoute,
 } from "lib/app-provider";
 import { useMigrateTx } from "lib/app-provider/tx/migrate";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -37,7 +37,7 @@ export const MigrateContract = ({
 }: MigrateContractProps) => {
   const { address } = useCurrentChain();
   const { broadcast } = useTxBroadcast();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const migrateTx = useMigrateTx();
   const fabricateFee = useFabricateFee();

src/lib/pages/migrate/index.tsx

@@ -5,10 +5,10 @@ import { useCallback, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
   useInternalNavigate,
-  useLCDEndpoint,
   useWasmConfig,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -38,7 +38,7 @@ const Migrate = () => {
   const { indexerGraphClient } = useCelatoneApp();
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
   const { data: uploadAccess } = useUploadAccessParams();
 
   const { address = "" } = useCurrentChain();

src/lib/pages/query/components/QueryArea.tsx

@@ -4,7 +4,7 @@ import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
-import { useCurrentChain, useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute, useCurrentChain } from "lib/app-provider";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
@@ -39,7 +39,7 @@ export const QueryArea = ({
   initialMsg,
   cmds,
 }: QueryAreaProps) => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const userKey = useUserKey();
   const { addActivity } = useContractStore();