feat(namadillo): avoid retrying for 4xx errors (#993)

apps/namadillo/src/App/Common/QueryProvider.tsx

@@ -0,0 +1,50 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { queryClientAtom } from "jotai-tanstack-query";
+import { Provider as JotaiProvider } from "jotai/react";
+import { useHydrateAtoms } from "jotai/utils";
+
+type ErrorWithResponse = Error & {
+  response?: {
+    status?: number;
+  };
+};
+
+const MAX_RETRIES = 3;
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: (failureCount, error: ErrorWithResponse) => {
+        if (failureCount > MAX_RETRIES) {
+          return false;
+        }
+
+        // Handles all 4xx errors
+        if (String(error?.response?.status).startsWith("4")) {
+          return false;
+        }
+
+        return true;
+      },
+    },
+  },
+});
+
+const HydrateAtoms = (props: { children: JSX.Element }): JSX.Element => {
+  useHydrateAtoms([[queryClientAtom, queryClient]]);
+  return props.children;
+};
+
+export const QueryProvider = ({
+  children,
+}: {
+  children: JSX.Element;
+}): JSX.Element => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <JotaiProvider>
+        <HydrateAtoms>{children}</HydrateAtoms>
+      </JotaiProvider>
+    </QueryClientProvider>
+  );
+};

apps/namadillo/src/index.tsx

@@ -1,6 +1,6 @@
 import { init as initShared } from "@namada/shared/src/init-inline";
 import { AppSetup } from "App/AppSetup";
-import { StoreProvider } from "atoms/store";
+import { QueryProvider } from "App/Common/QueryProvider";
 import { SdkProvider } from "hooks/useSdk";
 import React from "react";
 import { createRoot } from "react-dom/client";
@@ -18,15 +18,15 @@ if (container) {
   initShared().then(() => {
     root.render(
       <React.StrictMode>
-        <StoreProvider>
+        <QueryProvider>
           <IntegrationsProvider>
             <AppSetup>
               <SdkProvider>
                 <RouterProvider router={getRouter()} />
               </SdkProvider>
             </AppSetup>
           </IntegrationsProvider>
-        </StoreProvider>
+        </QueryProvider>
       </React.StrictMode>
     );
   });