rollback csrf

lib/api/resources.ts

@@ -11,9 +11,6 @@ export const RESOURCES = {
   user_info: {
     path: '/api/account/v1/user/info',
   },
-  csrf: {
-    path: '/api/account/v1/get_csrf',
-  },
   custom_abi: {
     path: '/api/account/v1/user/custom_abis/:id?',
   },

lib/api/useApiFetch.tsx

@@ -25,9 +25,11 @@ export default function useApiFetch() {
     const url = buildUrl(resource, pathParams, queryParams);
     return fetch<SuccessType, ErrorType>(url, {
       credentials: 'include',
-      ...(resource.endpoint && appConfig.host === 'localhost' ? { headers: {
-        'x-endpoint': resource.endpoint,
-      } } : {}),
+      ...(resource.endpoint && appConfig.host === 'localhost' ? {
+        headers: {
+          'x-endpoint': resource.endpoint,
+        },
+      } : {}),
       ...fetchParams,
     });
   }, [ fetch ]);

lib/api/useApiQuery.tsx

@@ -3,7 +3,6 @@ import { useQuery } from '@tanstack/react-query';
 
 import type { UserInfo, CustomAbis, PublicTags, AddressTags, TransactionTags, ApiKeys, WatchlistAddress } from 'types/api/account';
 import type { Stats, Charts } from 'types/api/stats';
-import type { CsrfData } from 'types/client/account';
 
 import type { RESOURCES, ResourceError } from './resources';
 import type { Params as ApiFetchParams } from './useApiFetch';
@@ -28,13 +27,12 @@ export default function useApiQuery<R extends keyof typeof RESOURCES>(
 
 export type ResourcePayload<Q extends keyof typeof RESOURCES> =
   Q extends 'user_info' ? UserInfo :
-    Q extends 'csrf' ? CsrfData :
-      Q extends 'custom_abi' ? CustomAbis :
-        Q extends 'public_tags' ? PublicTags :
-          Q extends 'private_tags_address' ? AddressTags :
-            Q extends 'private_tags_tx' ? TransactionTags :
-              Q extends 'api_keys' ? ApiKeys :
-                Q extends 'watchlist' ? Array<WatchlistAddress> :
-                  Q extends 'stats_counters' ? Stats :
-                    Q extends 'stats_charts' ? Charts :
-                      never;
+    Q extends 'custom_abi' ? CustomAbis :
+      Q extends 'public_tags' ? PublicTags :
+        Q extends 'private_tags_address' ? AddressTags :
+          Q extends 'private_tags_tx' ? TransactionTags :
+            Q extends 'api_keys' ? ApiKeys :
+              Q extends 'watchlist' ? Array<WatchlistAddress> :
+                Q extends 'stats_counters' ? Stats :
+                  Q extends 'stats_charts' ? Charts :
+                    never;

lib/hooks/useFetch.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import type { CsrfData } from 'types/client/account';
 
 import type { ResourceError } from 'lib/api/resources';
-import { resourceKey, RESOURCES } from 'lib/api/resources';
 
 export interface Params {
   method?: RequestInit['method'];
@@ -16,7 +15,7 @@ export interface Params {
 
 export default function useFetch() {
   const queryClient = useQueryClient();
-  const { token } = queryClient.getQueryData<CsrfData>([ resourceKey('csrf') ]) || {};
+  const { token } = queryClient.getQueryData<CsrfData>([ 'csrf' ]) || {};
 
   return React.useCallback(<Success, Error>(path: string, params?: Params): Promise<Success | ResourceError<Error>> => {
     const reqParams = {
@@ -27,8 +26,6 @@ export default function useFetch() {
     };
 
     return fetch(path, reqParams).then(response => {
-      // eslint-disable-next-line no-debugger
-      debugger;
       if (!response.ok) {
         const error = {
           status: response.status,
@@ -50,10 +47,6 @@ export default function useFetch() {
         );
 
       } else {
-        if (path.includes(RESOURCES.csrf.path)) {
-          return Promise.resolve({ token: response.headers.get('x-bs-account-csrf') }) as unknown as Promise<Success>;
-        }
-
         return response.json() as Promise<Success>;
       }
     });

pages/_app.tsx

@@ -15,14 +15,6 @@ import theme from 'theme';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
-const ReactQueryDevtoolsProduction = React.lazy(() =>
-  import('@tanstack/react-query-devtools/build/lib/index.prod.js').then(
-    (d) => ({
-      'default': d.ReactQueryDevtools,
-    }),
-  ),
-);
-
 function MyApp({ Component, pageProps }: AppProps) {
   useConfigSentry();
   const [ queryClient ] = useState(() => new QueryClient({
@@ -62,14 +54,6 @@ function MyApp({ Component, pageProps }: AppProps) {
     Sentry.captureException(error);
   }, []);
 
-  const [ showDevtools, setShowDevtools ] = React.useState(false);
-
-  React.useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    window.toggleDevtools = () => setShowDevtools((old) => !old);
-  }, []);
-
   return (
     <Chakra theme={ theme } cookies={ pageProps.cookies }>
       <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ handleError }>
@@ -81,11 +65,6 @@ function MyApp({ Component, pageProps }: AppProps) {
               </SocketProvider>
             </ScrollDirectionProvider>
             <ReactQueryDevtools/>
-            { showDevtools && (
-              <React.Suspense fallback={ null }>
-                <ReactQueryDevtoolsProduction/>
-              </React.Suspense>
-            ) }
           </QueryClientProvider>
         </AppContextProvider>
       </ErrorBoundary>

pages/api/csrf.ts

+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import fetchFactory from 'lib/api/fetch';
+import getUrlWithNetwork from 'lib/api/getUrlWithNetwork';
+import { httpLogger } from 'lib/api/logger';
+
+export default async function csrfHandler(_req: NextApiRequest, res: NextApiResponse) {
+  httpLogger(_req, res);
+
+  const url = getUrlWithNetwork(_req, `/api/account/v1/get_csrf`);
+  const fetch = fetchFactory(_req);
+  const response = await fetch(url);
+
+  if (response.status === 200) {
+    const token = response.headers.get('x-bs-account-csrf');
+    res.status(200).json({ token });
+    return;
+  }
+
+  const responseError = { statusText: response.statusText, status: response.status };
+  httpLogger.logger.error({ err: responseError, url: _req.url });
+
+  res.status(500).json(responseError);
+}

pages/api/proxy.ts

@@ -15,12 +15,6 @@ const handler = async(_req: NextApiRequest, res: NextApiResponse) => {
     _pickBy(_pick(_req, [ 'body', 'method' ]), Boolean),
   );
 
-  // some data back sends to us as header 🤦‍♂️
-  [ 'x-bs-account-csrf' ].forEach((headerName) => {
-    const headerValue = response.headers.get(headerName);
-    headerValue && res.setHeader(headerName, headerValue);
-  });
-
   res.status(response.status).send(response.body);
 };
 

ui/shared/Page/Page.tsx

 import { Flex } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import useApiQuery from 'lib/api/useApiQuery';
 import * as cookies from 'lib/cookies';
+import useFetch from 'lib/hooks/useFetch';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import PageContent from 'ui/shared/Page/PageContent';
@@ -22,10 +23,10 @@ const Page = ({
   hideMobileHeaderOnScrollDown,
   isHomePage,
 }: Props) => {
-  useApiQuery('csrf', {
-    queryOptions: {
-      enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
-    },
+  const fetch = useFetch();
+
+  useQuery([ 'csrf' ], async() => await fetch('/node-api/csrf'), {
+    enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
   });
 
   const renderErrorScreen = React.useCallback(() => {