feat: masp indexer url UI and rpc backup

Author: mateuszjasiuk

apps/namadillo/src/App/Settings/Advanced.tsx

@@ -2,8 +2,10 @@ import { ActionButton, Input, Stack } from "@namada/components";
 import { chainParametersAtom } from "atoms/chain";
 import {
   indexerUrlAtom,
+  maspIndexerUrlAtom,
   rpcUrlAtom,
   updateIndexerUrlAtom,
+  updateMaspIndexerUrlAtom,
   updateRpcUrlAtom,
 } from "atoms/settings";
 import { useAtom, useAtomValue } from "jotai";
@@ -16,25 +18,32 @@ export const Advanced = (): JSX.Element => {
   const [currentRpc] = useAtom(rpcUrlAtom);
   const [rpcMutation] = useAtom(updateRpcUrlAtom);
   const [currentIndexer] = useAtom(indexerUrlAtom);
+  const [currentMaspIndexer] = useAtom(maspIndexerUrlAtom);
   const [indexerMutation] = useAtom(updateIndexerUrlAtom);
+  const [maspIndexerMutation] = useAtom(updateMaspIndexerUrlAtom);
   const { data: chainParameters } = useAtomValue(chainParametersAtom);
 
   const [rpc, setRpc] = useState(currentRpc);
   const [indexer, setIndexer] = useState(currentIndexer);
+  const [maspIndexer, setMaspIndexer] = useState(currentMaspIndexer);
 
   const onSubmit = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
     try {
       await Promise.all([
         rpcMutation.mutateAsync(rpc),
         indexerMutation.mutateAsync(indexer),
+        maspIndexerMutation.mutateAsync(maspIndexer),
       ]);
       document.location.href =
         location.state.backgroundLocation.pathname ?? location.pathname;
     } catch {}
   };
 
-  const isPending = rpcMutation.isPending || indexerMutation.isPending;
+  const isPending =
+    rpcMutation.isPending ||
+    indexerMutation.isPending ||
+    maspIndexerMutation.isPending;
 
   return (
     <form
@@ -71,6 +80,21 @@ export const Advanced = (): JSX.Element => {
           }}
           required
         />
+        <Input
+          type="text"
+          placeholder="Optional"
+          value={maspIndexer}
+          error={
+            maspIndexerMutation.error instanceof Error &&
+            maspIndexerMutation.error.message
+          }
+          label="MASP Indexer URL"
+          className="[&_input]:border-neutral-300"
+          onChange={(e) => {
+            setMaspIndexer(e.currentTarget.value);
+            maspIndexerMutation.reset();
+          }}
+        />
         <Input
           type="text"
           variant="ReadOnlyCopy"

apps/namadillo/src/atoms/settings/atoms.ts

@@ -4,7 +4,12 @@ import { Getter, Setter, atom, getDefaultStore } from "jotai";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
 import { atomWithStorage } from "jotai/utils";
 import { SettingsStorage } from "types";
-import { fetchDefaultTomlConfig, isIndexerAlive, isRpcAlive } from "./services";
+import {
+  fetchDefaultTomlConfig,
+  isIndexerAlive,
+  isMaspIndexerAlive,
+  isRpcAlive,
+} from "./services";
 
 export type ConnectStatus = "idle" | "connecting" | "connected" | "error";
 
@@ -65,18 +70,21 @@ const changeSettings =
 const changeSettingsUrl =
   (
     key: keyof SettingsStorage,
-    healthCheck: (url: string) => Promise<boolean>
+    healthCheck: (url: string) => Promise<boolean>,
+    allowEmpty = false
   ) =>
-  async (url: string) => {
-    const sanitizedUrl = sanitizeUrl(url);
-    if (!isUrlValid(sanitizedUrl)) {
+  async (inputUrl: string) => {
+    const allowedEmpty = allowEmpty && inputUrl.length === 0;
+    const url = allowedEmpty ? "" : sanitizeUrl(inputUrl);
+
+    if (!allowedEmpty && !isUrlValid(url)) {
       throw new Error(
         "Invalid URL. The URL should be valid starting with 'http', 'https', 'ws', or 'wss'."
       );
     }
-    if (await healthCheck(sanitizedUrl)) {
+    if (allowedEmpty || (await healthCheck(url))) {
       const { get, set } = getDefaultStore();
-      changeSettings(key)(get, set, sanitizedUrl);
+      changeSettings(key)(get, set, url);
     } else {
       throw new Error(
         "Couldn't reach the URL. Please provide a valid Namada URL service."
@@ -143,13 +151,30 @@ export const indexerUrlAtom = atom((get) => {
   return "";
 });
 
+export const maspIndexerUrlAtom = atom((get) => {
+  const customIndexerUrl = get(settingsAtom).maspIndexerUrl;
+  if (customIndexerUrl) return customIndexerUrl;
+
+  const tomlIndexerUrl = get(defaultServerConfigAtom).data?.masp_indexer_url;
+  if (tomlIndexerUrl) return tomlIndexerUrl;
+
+  return "";
+});
+
 export const updateIndexerUrlAtom = atomWithMutation(() => {
   return {
     mutationKey: ["update-indexer-url"],
     mutationFn: changeSettingsUrl("indexerUrl", isIndexerAlive),
   };
 });
 
+export const updateMaspIndexerUrlAtom = atomWithMutation(() => {
+  return {
+    mutationKey: ["update-masp-indexer-url"],
+    mutationFn: changeSettingsUrl("maspIndexerUrl", isMaspIndexerAlive, true),
+  };
+});
+
 export const signArbitraryEnabledAtom = atom(
   (get) => get(settingsAtom).signArbitraryEnabled,
   changeSettings<boolean>("signArbitraryEnabled")

apps/namadillo/src/atoms/settings/services.ts

@@ -17,6 +17,18 @@ export const isIndexerAlive = async (url: string): Promise<boolean> => {
   }
 };
 
+export const isMaspIndexerAlive = async (url: string): Promise<boolean> => {
+  if (!isUrlValid(url)) {
+    return false;
+  }
+  try {
+    const response = await fetch(`${url}/health`);
+    return response.ok && response.status === 200;
+  } catch {
+    return false;
+  }
+};
+
 export const isRpcAlive = async (url: string): Promise<boolean> => {
   if (!isUrlValid(url)) {
     return false;

apps/namadillo/src/hooks/useSdk.tsx

@@ -1,7 +1,7 @@
 import initSdk from "@heliax/namada-sdk/inline-init";
 import { getSdk, Sdk } from "@heliax/namada-sdk/web";
 import { nativeTokenAddressAtom } from "atoms/chain";
-import { rpcUrlAtom } from "atoms/settings";
+import { maspIndexerUrlAtom, rpcUrlAtom } from "atoms/settings";
 import { getDefaultStore, useAtomValue } from "jotai";
 import {
   createContext,
@@ -18,13 +18,20 @@ const initializeSdk = async (): Promise<Sdk> => {
   const { cryptoMemory } = await initSdk();
   const store = getDefaultStore();
   const rpcUrl = store.get(rpcUrlAtom);
+  const maspIndexerUrl = store.get(maspIndexerUrlAtom);
   const nativeToken = store.get(nativeTokenAddressAtom);
 
   if (!nativeToken.isSuccess) {
     throw "Native token not loaded";
   }
 
-  const sdk = getSdk(cryptoMemory, rpcUrl, "", nativeToken.data);
+  const sdk = getSdk(
+    cryptoMemory,
+    rpcUrl,
+    maspIndexerUrl,
+    "",
+    nativeToken.data
+  );
   return sdk;
 };
 

apps/namadillo/src/types.d.ts

@@ -45,6 +45,7 @@ export type ChainSettings = {
 
 export type SettingsTomlOptions = {
   indexer_url?: string;
+  masp_indexer_url?: string;
   rpc_url?: string;
 };
 
@@ -61,6 +62,7 @@ export type SettingsStorage = {
   fiat: CurrencyType;
   rpcUrl?: string;
   indexerUrl: string;
+  maspIndexerUrl?: string;
   signArbitraryEnabled: boolean;
 };
 

packages/sdk/src/indexWeb.ts

@@ -8,6 +8,7 @@ export * from "./utils";
  * @async
  * @param cryptoMemory - WebAssembly.Memory of crypto package
  * @param url - URL of the node
+ * @param maspIndexerUrl - optional URL of the MASP indexer
  * @param dbName - Name of the database for the serialized wallet
  * @param [token] - Native token of the chain
  * @throws {Error} - Unable to Query native token
@@ -16,11 +17,15 @@ export * from "./utils";
 export function getSdk(
   cryptoMemory: WebAssembly.Memory,
   url: string,
+  maspIndexerUrl: string,
   dbName: string,
   token: string
 ): Sdk {
+  // We change empty string to undefined so it "maps" to the Option<String> in Rust
+  const maspIndexerUrlOpt =
+    maspIndexerUrl.length === 0 ? undefined : maspIndexerUrl;
   // Instantiate QueryWasm
-  const query = new QueryWasm(url);
+  const query = new QueryWasm(url, maspIndexerUrlOpt);
 
   // Instantiate SdkWasm
   const sdk = new SdkWasm(url, token, dbName);