Merge pull request #20 from protofire/export-csv-verified-contracts

Export csv verified contracts
protofire · Sep 11, 2024 · 331519e · 331519e
2 parents 9b46e2f + 57b5a11
commit 331519e
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 21 deletions.
diff --git a/lib/api/resources.ts b/lib/api/resources.ts
@@ -870,6 +870,9 @@ export const RESOURCES = {
   csv_export_logs: {
     path: '/api/v1/logs-csv',
   },
+  csv_export_contracts: {
+    path: '/api/v1/smart-contracts-csv',
+  },
   graphql: {
     path: '/api/v1/graphql',
   },

diff --git a/types/client/address.ts b/types/client/address.ts
@@ -8,4 +8,8 @@ export type CsvExportParams = {
   type: 'logs';
   filterType?: 'topic';
   filterValue?: string;
+} | {
+  type: 'contracts';
+  filterType?: string;
+  filterValue?: string;
 }
diff --git a/ui/address/AddressCsvExportLink.tsx b/ui/address/AddressCsvExportLink.tsx
@@ -12,7 +12,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/LinkInternal';
 
 interface Props {
-  address: string;
+  address?: string;
   params: CsvExportParams;
   className?: string;
   isLoading?: boolean;
@@ -44,7 +44,7 @@ const AddressCsvExportLink = ({ className, address, params, isLoading }: Props)
         display="inline-flex"
         alignItems="center"
         whiteSpace="nowrap"
-        href={ route({ pathname: '/csv-export', query: { ...params, address } }) }
+        href={ route({ pathname: '/csv-export', query: { ...params, ...(address ? { address } : {}) } }) }
         flexShrink={ 0 }
       >
         <IconSvg name="files/csv" boxSize={{ base: '30px', lg: 6 }}/>

diff --git a/ui/csvExport/CsvExportForm.tsx b/ui/csvExport/CsvExportForm.tsx
@@ -16,7 +16,7 @@ import CsvExportFormField from './CsvExportFormField';
 import CsvExportFormReCaptcha from './CsvExportFormReCaptcha';
 
 interface Props {
-  hash: string;
+  hash?: string;
   resource: ResourceName;
   filterType?: CsvExportParams['filterType'] | null;
   filterValue?: CsvExportParams['filterValue'] | null;
@@ -58,7 +58,7 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
       const blob = await response.blob();
       downloadBlob(
         blob,
-        `${ fileNameTemplate }_${ hash }_${ data.from }_${ data.to }
+        `${ fileNameTemplate }${ hash ? `_${ hash }` : '' }_${ data.from }_${ data.to }
         ${ filterType && filterValue ? '_with_filter_type_' + filterType + '_value_' + filterValue : '' }.csv`,
       );
 

diff --git a/ui/pages/CsvExport.tsx b/ui/pages/CsvExport.tsx
@@ -53,9 +53,15 @@ const EXPORT_TYPES: Record<CsvExportParams['type'], ExportTypeEntity> = {
     fileNameTemplate: 'logs',
     filterType: 'topic',
   },
+  contracts: {
+    text: 'Contracts',
+    resource: 'csv_export_contracts',
+    fileNameTemplate: 'contracts',
+  },
 };
 
-const isCorrectExportType = (type: string): type is CsvExportParams['type'] => Object.keys(EXPORT_TYPES).includes(type);
+const isCorrectExportType = (type: string): type is CsvExportParams['type'] =>
+  Object.keys(EXPORT_TYPES).includes(type);
 
 const CsvExport = () => {
   const router = useRouter();
@@ -64,7 +70,9 @@ const CsvExport = () => {
 
   const addressHash = router.query.address?.toString() || '';
   const exportTypeParam = router.query.type?.toString() || '';
-  const exportType = isCorrectExportType(exportTypeParam) ? EXPORT_TYPES[exportTypeParam] : null;
+  const exportType = isCorrectExportType(exportTypeParam) ?
+    EXPORT_TYPES[exportTypeParam] :
+    null;
   const filterTypeFromQuery = router.query.filterType?.toString() || null;
   const filterValueFromQuery = router.query.filterValue?.toString();
 
@@ -76,7 +84,8 @@ const CsvExport = () => {
   });
 
   const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
+    const hasGoBackLink =
+      appProps.referrer && appProps.referrer.includes('/address');
 
     if (!hasGoBackLink) {
       return;
@@ -88,30 +97,34 @@ const CsvExport = () => {
     };
   }, [ appProps.referrer ]);
 
-  throwOnAbsentParamError(addressHash);
   throwOnAbsentParamError(exportType);
+  exportTypeParam !== 'contracts' && throwOnAbsentParamError(addressHash);
 
   if (!exportType) {
     return null;
   }
 
-  const filterType = filterTypeFromQuery === exportType.filterType ? filterTypeFromQuery : null;
+  const filterType =
+    filterTypeFromQuery === exportType.filterType ? filterTypeFromQuery : null;
   const filterValue = (() => {
     if (!filterType || !filterValueFromQuery) {
       return null;
     }
 
-    if (exportType.filterValues && !exportType.filterValues?.includes(filterValueFromQuery)) {
+    if (
+      exportType.filterValues &&
+      !exportType.filterValues?.includes(filterValueFromQuery)
+    ) {
       return null;
     }
 
     return filterValueFromQuery;
   })();
 
   const content = (() => {
-    throwOnResourceLoadError(addressQuery);
+    exportTypeParam !== 'contracts' && throwOnResourceLoadError(addressQuery);
 
-    if (addressQuery.isPending) {
+    if (exportTypeParam !== 'contracts' && addressQuery.isPending) {
       return <ContentLoader/>;
     }
 
@@ -126,24 +139,43 @@ const CsvExport = () => {
     );
   })();
 
-  return (
-    <>
-      <PageTitle
-        title="Export data to CSV file"
-        backLink={ backLink }
-      />
+  const header = (() => {
+    if (exportTypeParam === 'contracts') {
+      return (
+        <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
+          <span>Export { exportType.text } to CSV file.</span>
+        </Flex>
+      );
+    }
+
+    return (
       <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
         <span>Export { exportType.text } for address </span>
         <AddressEntity
-          address={{ hash: addressHash, is_contract: true, implementation_name: null }}
+          address={{
+            hash: addressHash,
+            is_contract: true,
+            implementation_name: null,
+          }}
           truncation={ isMobile ? 'constant' : 'dynamic' }
           noCopy
         />
         <span>{ nbsp }</span>
-        { filterType && filterValue && <span>with applied filter by { filterType } ({ filterValue }) </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>
       </Flex>
+    );
+  })();
+
+  return (
+    <>
+      <PageTitle title="Export data to CSV file" backLink={ backLink }/>
+      { header }
       { content }
     </>
   );

diff --git a/ui/pages/VerifiedContracts.tsx b/ui/pages/VerifiedContracts.tsx
@@ -12,6 +12,7 @@ import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { VERIFIED_CONTRACT_INFO } from 'stubs/contract';
 import { generateListStub } from 'stubs/utils';
+import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import FilterInput from 'ui/shared/filters/FilterInput';
@@ -92,6 +93,10 @@ const VerifiedContracts = () => {
     />
   );
 
+  const showCSVDownload = React.useMemo(() => {
+    return localStorage.getItem('showCSVdownload') === 'true';
+  }, []);
+
   const sortButton = (
     <Sort
       options={ SORT_OPTIONS }
@@ -100,6 +105,14 @@ const VerifiedContracts = () => {
     />
   );
 
+  const csvExportLink = (
+    <AddressCsvExportLink
+      params={{ type: 'contracts' }}
+      className=""
+      isLoading={ isPlaceholderData }
+    />
+  );
+
   const actionBar = (
     <>
       <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
@@ -113,7 +126,10 @@ const VerifiedContracts = () => {
             { typeFilter }
             { filterInput }
           </HStack>
-          <Pagination ml="auto" { ...pagination }/>
+          <HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
+            { showCSVDownload && csvExportLink }
+            <Pagination ml="auto" { ...pagination }/>
+          </HStack>
         </ActionBar>
       ) }
     </>