feat: update endpoint

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#333](https://github.com/alleslabs/celatone-frontend/pull/333) Update endpoints including LCD, RPC, Graphql
 - [#268](https://github.com/alleslabs/celatone-frontend/pull/268) Wireup create proposal to whitelisting
 - [#266](https://github.com/alleslabs/celatone-frontend/pull/250) Add proposal whitelisting page
 - [#286](https://github.com/alleslabs/celatone-frontend/pull/286) Add block proposer

codegen.ts

@@ -1,5 +1,8 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
 
+/**
+ * @remarks Update schema when it is needed
+ */
 const config: CodegenConfig = {
   schema: "https://osmosis-testnet-graphql.alleslabs.dev/v1/graphql",
   documents: ["src/**/*.tsx", "src/**/*.ts"],

src/env.ts

@@ -18,14 +18,6 @@ export const DEFAULT_SUPPORTED_CHAIN_ID = SUPPORTED_CHAIN_IDS[0];
 
 export const DUMMY_MNEMONIC = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;
 
-// TODO: Below are deprecated. Remove them later
-export const FALLBACK_LCD_ENDPOINT: Record<string, string> = {
-  osmosis: "https://lcd.osmosis.zone/",
-  osmosistestnet: "https://lcd-test.osmosis.zone/",
-  terra2: "https://phoenix-lcd.terra.dev/",
-  terra2testnet: "https://pisco-lcd.terra.dev/",
-};
-
 export const SELECTED_CHAIN = process.env
   .NEXT_PUBLIC_SELECTED_CHAIN as SupportedChain;
 

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

@@ -12,3 +12,4 @@ export * from "./useSelectChain";
 export * from "./useSimulateFee";
 export * from "./useTokensInfo";
 export * from "./useCurrentNetwork";
+export * from "./useRPCEndpoint";

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

@@ -1,12 +1,10 @@
 import { useWallet } from "@cosmos-kit/react";
 
-import { FALLBACK_LCD_ENDPOINT } from "env";
+import { useCelatoneApp } from "../contexts";
 
 export const useLCDEndpoint = () => {
-  const { currentChainRecord, currentChainName } = useWallet();
+  const { currentChainRecord } = useWallet();
+  const { chainConfig } = useCelatoneApp();
 
-  return (
-    currentChainRecord?.preferredEndpoints?.rest?.[0] ??
-    FALLBACK_LCD_ENDPOINT[currentChainName]
-  );
+  return currentChainRecord?.preferredEndpoints?.rest?.[0] ?? chainConfig.lcd;
 };

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

@@ -0,0 +1,10 @@
+import { useWallet } from "@cosmos-kit/react";
+
+import { useCelatoneApp } from "../contexts";
+
+export const useRPCEndpoint = () => {
+  const { currentChainRecord } = useWallet();
+  const { chainConfig } = useCelatoneApp();
+
+  return currentChainRecord?.preferredEndpoints?.rpc?.[0] ?? chainConfig.rpc;
+};

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

@@ -2,7 +2,7 @@ import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
-import { useDummyWallet } from "../hooks";
+import { useDummyWallet, useRPCEndpoint } from "../hooks";
 import type { ComposedMsg, Gas } from "lib/types";
 
 interface SimulateQueryParams {
@@ -20,22 +20,21 @@ export const useSimulateFeeQuery = ({
   onSuccess,
   onError,
 }: SimulateQueryParams) => {
-  const { address, getCosmWasmClient, currentChainName, currentChainRecord } =
-    useWallet();
+  const { address, getCosmWasmClient, currentChainName } = useWallet();
   const { dummyWallet, dummyAddress } = useDummyWallet();
-
+  const rpcEndpoint = useRPCEndpoint();
   const userAddress = isDummyUser ? dummyAddress : address || dummyAddress;
 
   const simulateFn = async (msgs: ComposedMsg[]) => {
     // TODO: revisit this logic
-    if (!currentChainRecord?.preferredEndpoints?.rpc?.[0] || !userAddress) {
-      throw new Error("No RPC endpoint or user address");
+    if (!userAddress) {
+      throw new Error("No user address");
     }
 
     const client =
       dummyWallet && (isDummyUser || !address)
         ? await SigningCosmWasmClient.connectWithSigner(
-            currentChainRecord.preferredEndpoints.rpc[0],
+            rpcEndpoint,
             dummyWallet
           )
         : await getCosmWasmClient();
@@ -48,7 +47,13 @@ export const useSimulateFeeQuery = ({
   };
 
   return useQuery({
-    queryKey: ["simulate", currentChainName, userAddress, messages],
+    queryKey: [
+      "simulate",
+      currentChainName,
+      userAddress,
+      messages,
+      rpcEndpoint,
+    ],
     queryFn: async ({ queryKey }) => simulateFn(queryKey[3] as ComposedMsg[]),
     enabled,
     keepPreviousData: true,

src/lib/components/ContractSelectSection.tsx

@@ -136,7 +136,7 @@ export const ContractSelectSection = observer(
     const { getContractLocalInfo } = useContractStore();
     const { indexerGraphClient } = useCelatoneApp();
     const isMobile = useMobile();
-    const endpoint = useLCDEndpoint();
+    const lcdEndpoint = useLCDEndpoint();
 
     const contractLocalInfo = getContractLocalInfo(contractAddress);
     const {
@@ -156,12 +156,12 @@ export const ContractSelectSection = observer(
       [
         "query",
         "instantiate_info",
-        endpoint,
+        lcdEndpoint,
         indexerGraphClient,
         contractAddress,
       ],
       async () =>
-        queryInstantiateInfo(endpoint, indexerGraphClient, contractAddress),
+        queryInstantiateInfo(lcdEndpoint, indexerGraphClient, contractAddress),
       {
         enabled: false,
         retry: false,
@@ -188,7 +188,7 @@ export const ContractSelectSection = observer(
           label: contractLocalInfo.label,
         });
       }
-    }, [contractAddress, contractLocalInfo, endpoint, reset, refetch]);
+    }, [contractAddress, contractLocalInfo, lcdEndpoint, reset, refetch]);
 
     const contractState = watch();
     const notSelected = contractAddress.length === 0;

src/lib/components/modal/CodeSnippet.tsx

@@ -19,10 +19,10 @@ import AceEditor from "react-ace";
 
 import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
-import { useLCDEndpoint } from "lib/app-provider";
+import { useLCDEndpoint, useRPCEndpoint } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { ContractAddr, Option } from "lib/types";
+import type { ContractAddr } from "lib/types";
 
 import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-sh";
@@ -36,21 +36,6 @@ interface CodeSnippetProps {
   type: "query" | "execute";
 }
 
-/**
- *
- * @todo: This is a temporary solution to get the full RPC URL for Osmosis.
- */
-const getFullRpcUrl = (rpcUrl: Option<string>, chainId: Option<string>) => {
-  const baseUrl = rpcUrl?.slice(0, rpcUrl.length - 1);
-  switch (chainId) {
-    case "osmosis-1":
-    case "osmo-test-4":
-      return `${baseUrl}:443`;
-    default:
-      return `${baseUrl}:26657`;
-  }
-};
-
 const CodeSnippet = ({
   contractAddress,
   message,
@@ -59,10 +44,9 @@ const CodeSnippet = ({
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { currentChainRecord, currentChainName } = useWallet();
   const isDisabled = !contractAddress || !message.length;
-
-  const endpoint = useLCDEndpoint();
   const client = currentChainRecord?.chain.daemon_name;
-  const rpcUrl = currentChainRecord?.preferredEndpoints?.rpc?.[0];
+  const lcdEndpoint = useLCDEndpoint();
+  const rpcEndpoint = useRPCEndpoint();
   const chainId = currentChainRecord?.chain.chain_id;
   const codeSnippets: Record<
     string,
@@ -75,7 +59,7 @@ const CodeSnippet = ({
         snippet: `export CHAIN_ID='${chainId}'\n
 export CONTRACT_ADDRESS='${contractAddress}'\n
 export QUERY_MSG='${message}'\n
-export RPC_URL='${getFullRpcUrl(rpcUrl, chainId)}'\n
+export RPC_URL='${rpcEndpoint}'\n
 ${client} query wasm contract-state smart $CONTRACT_ADDRESS $QUERY_MSG \\
   --chain-id $CHAIN_ID \\
   --node $RPC_URL`,
@@ -86,7 +70,7 @@ ${client} query wasm contract-state smart $CONTRACT_ADDRESS $QUERY_MSG \\
         snippet: `import base64
 import requests\n
 CONTRACT_ADDRESS = "${contractAddress}"
-LCD_URL = "${endpoint}"
+LCD_URL = "${lcdEndpoint}"
 QUERY_MSG = b'''${message}'''\n
 query_b64encoded = base64.b64encode(QUERY_MSG).decode("ascii")
 res = requests.get(
@@ -98,7 +82,7 @@ print(res)`,
         name: "CosmJS",
         mode: "javascript",
         snippet: `const { SigningCosmWasmClient } = require("@cosmjs/cosmwasm-stargate");
-const rpcURL = "${rpcUrl}";
+const rpcURL = "${rpcEndpoint}";
 const contractAddress =
 "${contractAddress}";
 const queryMsg = \`${message}\`;\n
@@ -116,7 +100,7 @@ queryContract(rpcURL, contractAddress, queryMsg);`,
         name: "Axios",
         mode: "javascript",
         snippet: `const axios = require('axios');\n
-const lcdURL = '${endpoint}';
+const lcdURL = '${lcdEndpoint}';
 const contractAddress =
 "${contractAddress}";
 const queryMsg = ${message};\n
@@ -134,7 +118,7 @@ queryContract();`,
         mode: "sh",
         snippet: `${client} keys add --recover celatone\n
 export CHAIN_ID='${chainId}'\n
-export RPC_URL='${getFullRpcUrl(rpcUrl, chainId)}'\n
+export RPC_URL='${rpcEndpoint}'\n
 export CONTRACT_ADDRESS='${contractAddress}'\n
 export EXECUTE_MSG='${message}'\n
 ${client} tx wasm execute $CONTRACT_ADDRESS $EXECUTE_MSG \\
@@ -158,7 +142,7 @@ const contractAddress =
   '${contractAddress}';
 
 const execute = async () => {
-  const rpcEndpoint = '${rpcUrl}';
+  const rpcEndpoint = '${rpcEndpoint}';
   const signer = await getOfflineSignerAmino({ mnemonic, chain });
   const client = await SigningCosmWasmClient.connectWithSigner(
     rpcEndpoint,

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

@@ -53,11 +53,11 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const toast = useToast();
   const { isCodeIdSaved, saveNewCode, updateCodeInfo, getCodeLocalInfo } =
     useCodeStore();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const { refetch, isFetching, isRefetching } = useQuery(
-    ["query", endpoint, codeId],
-    async () => getCodeIdInfo(endpoint, Number(codeId)),
+    ["query", lcdEndpoint, codeId],
+    async () => getCodeIdInfo(lcdEndpoint, Number(codeId)),
     {
       enabled: false,
       retry: false,

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

@@ -41,7 +41,8 @@ export function SaveNewContractModal({
   list,
   buttonProps,
 }: SaveNewContractModalProps) {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const { indexerGraphClient } = useCelatoneApp();
   const { getContractLocalInfo } = useContractStore();
   const { validateContractAddress } = useValidateAddress();
@@ -102,10 +103,10 @@ export function SaveNewContractModal({
 
   // TODO: Abstract query
   const { refetch } = useQuery(
-    ["query", "instantiate_info", endpoint, contractAddressState],
+    ["query", "instantiate_info", lcdEndpoint, contractAddressState],
     async () =>
       queryInstantiateInfo(
-        endpoint,
+        lcdEndpoint,
         indexerGraphClient,
         contractAddressState as ContractAddr
       ),

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

@@ -63,7 +63,7 @@ export const SelectContractInstantiator = ({
   const contractLists = [instantiatedListInfo, ...getContractLists()];
   const contractList = contractLists.find((item) => item.slug === listSlug);
 
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const resetOnClose = () => {
     setListSlug("");
@@ -80,8 +80,8 @@ export const SelectContractInstantiator = ({
 
   // TODO: Abstract query
   const { refetch, isFetching, isRefetching } = useQuery(
-    ["query", "contract", searchContract, endpoint],
-    async () => queryContract(endpoint, searchContract as ContractAddr),
+    ["query", "contract", searchContract, lcdEndpoint],
+    async () => queryContract(lcdEndpoint, searchContract as ContractAddr),
     {
       enabled: false,
       retry: false,

src/lib/hooks/useQueryCmds.ts

@@ -8,12 +8,12 @@ import type { ContractAddr, RpcQueryError } from "lib/types";
 
 export const useQueryCmds = (contractAddress: ContractAddr) => {
   const [queryCmds, setQueryCmds] = useState<[string, string][]>([]);
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const { isFetching } = useQuery(
-    ["query", "cmds", endpoint, contractAddress, '{"": {}}'],
+    ["query", "cmds", lcdEndpoint, contractAddress, '{"": {}}'],
     async () =>
-      queryData(endpoint, contractAddress as ContractAddr, '{"": {}}'),
+      queryData(lcdEndpoint, contractAddress as ContractAddr, '{"": {}}'),
     {
       enabled: !!contractAddress,
       retry: false,

src/lib/model/contract.ts

@@ -95,7 +95,8 @@ export const useContractData = (
   const { currentChainRecord } = useWallet();
   const { getCodeLocalInfo } = useCodeStore();
   const { getContractLocalInfo } = useContractStore();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const { assetInfos } = useAssetInfos();
   const { data: publicInfo } =
     usePublicProjectByContractAddress(contractAddress);
@@ -104,16 +105,16 @@ export const useContractData = (
 
   const { data: instantiateInfo, isLoading: isInstantiateInfoLoading } =
     useQuery(
-      ["query", "instantiate_info", endpoint, contractAddress],
+      ["query", "instantiate_info", lcdEndpoint, contractAddress],
       async () =>
-        queryInstantiateInfo(endpoint, indexerGraphClient, contractAddress),
+        queryInstantiateInfo(lcdEndpoint, indexerGraphClient, contractAddress),
       { enabled: !!currentChainRecord && !!contractAddress, retry: false }
     );
 
   const { data: contractCw2Info, isLoading: isContractCw2InfoLoading } =
     useQuery(
-      ["query", "contract_cw2_info", endpoint, contractAddress],
-      async () => queryContractCw2Info(endpoint, contractAddress),
+      ["query", "contract_cw2_info", lcdEndpoint, contractAddress],
+      async () => queryContractCw2Info(lcdEndpoint, contractAddress),
       { enabled: !!currentChainRecord && !!contractAddress, retry: false }
     );
 

src/lib/pages/admin/index.tsx

@@ -42,7 +42,8 @@ const UpdateAdmin = () => {
   const fabricateFee = useFabricateFee();
   const updateAdminTx = useUpdateAdminTx();
   const { broadcast } = useTxBroadcast();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const { indexerGraphClient } = useCelatoneApp();
 
   const [adminAddress, setAdminAddress] = useState("");
@@ -115,12 +116,16 @@ const UpdateAdmin = () => {
     [
       "query",
       "instantiate_info",
-      endpoint,
+      lcdEndpoint,
       indexerGraphClient,
       contractAddressParam,
     ],
     async () =>
-      queryInstantiateInfo(endpoint, indexerGraphClient, contractAddressParam),
+      queryInstantiateInfo(
+        lcdEndpoint,
+        indexerGraphClient,
+        contractAddressParam
+      ),
     {
       enabled: !!contractAddressParam,
       refetchOnWindowFocus: false,