Support new CSV export limit in the UI (#2237)

Fixes #2215

lib/api/resources.ts

@@ -61,7 +61,7 @@ import type {
   BlockEpochElectionRewardDetailsResponse,
 } from 'types/api/block';
 import type { ChartMarketResponse, ChartSecondaryCoinPriceResponse, ChartTransactionResponse } from 'types/api/charts';
-import type { BackendVersionConfig } from 'types/api/configs';
+import type { BackendVersionConfig, CsvExportConfig } from 'types/api/configs';
 import type {
   SmartContract,
   SmartContractVerificationConfigRaw,
@@ -917,6 +917,9 @@ export const RESOURCES = {
   config_backend_version: {
     path: '/api/v2/config/backend-version',
   },
+  config_csv_export: {
+    path: '/api/v2/config/csv-export',
+  },
 
   // CSV EXPORT
   csv_export_token_holders: {
@@ -1114,6 +1117,7 @@ never;
 /* eslint-disable @typescript-eslint/indent */
 export type ResourcePayloadB<Q extends ResourceName> =
 Q extends 'config_backend_version' ? BackendVersionConfig :
+Q extends 'config_csv_export' ? CsvExportConfig :
 Q extends 'address_metadata_info' ? AddressMetadataInfo :
 Q extends 'address_metadata_tag_types' ? PublicTagTypesResponse :
 Q extends 'blob' ? Blob :

types/api/configs.ts

 export interface BackendVersionConfig {
   backend_version: string;
 }
+
+export interface CsvExportConfig {
+  limit: number;
+}

ui/pages/CsvExport.pw.tsx

@@ -15,6 +15,7 @@ test('base view +@mobile +@dark-mode', async({ render, page, mockApiResponse })
     },
   };
   await mockApiResponse('address', addressMock.validator, { pathParams: { hash: addressMock.hash } });
+  await mockApiResponse('config_csv_export', { limit: 42123 });
 
   const component = await render(<Box sx={{ '.recaptcha': { w: '304px', h: '78px' } }}><CsvExport/></Box>, { hooksConfig });
 

ui/pages/CsvExport.tsx

@@ -88,7 +88,13 @@ const CsvExport = () => {
     },
   });
 
-  const isLoading = addressQuery.isPending || (exportTypeParam === 'holders' && tokenQuery.isPending);
+  const configQuery = useApiQuery('config_csv_export', {
+    queryOptions: {
+      enabled: Boolean(addressHash),
+    },
+  });
+
+  const isLoading = addressQuery.isPending || configQuery.isPending || (exportTypeParam === 'holders' && tokenQuery.isPending);
 
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
@@ -147,6 +153,8 @@ const CsvExport = () => {
       return null;
     }
 
+    const limit = (configQuery.data?.limit || 10_000).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' });
+
     if (exportTypeParam === 'holders') {
       return (
         <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
@@ -160,7 +168,7 @@ const CsvExport = () => {
             noSymbol
           />
           <span> to CSV file. </span>
-          <span>Exports are limited to the top 10K holders by amount held.</span>
+          <span>Exports are limited to the top { limit } holders by amount held.</span>
         </Flex>
       );
     }
@@ -176,7 +184,7 @@ const CsvExport = () => {
         <span>{ nbsp }</span>
         { filterType && filterValue && <span>with applied filter by { filterType } ({ filterValue }) </span> }
         <span>to CSV file. </span>
-        <span>Exports are limited to the last 10K { exportType.text }.</span>
+        <span>Exports are limited to the last { limit } { exportType.text }.</span>
       </Flex>
     );
   })();