filters counters and verify button (blockscout#1294)

* add counter to filters

* move verification button higher for partially verified contracts

* [skip ci] support query params in external assets ENV urls

* [skip ci] skip code checks if changes in tools folder

* [skip ci] tweak eslint process.env rule

.eslintignore

@@ -4,4 +4,5 @@ node_modules_linux
 playwright/envs.js
 deploy/tools/envs-validator/index.js
 deploy/tools/feature-reporter/build/**
-deploy/tools/feature-reporter/index.js
+deploy/tools/feature-reporter/index.js
+public/**

.eslintrc.js

@@ -305,7 +305,7 @@ module.exports = {
       },
     },
     {
-      files: [ 'configs/**/*.js', 'configs/**/*.ts', '*.config.ts', 'playwright/**/*.ts', 'deploy/tools/**' ],
+      files: [ '*.config.ts', 'playwright/**', 'deploy/tools/**', 'middleware.ts' ],
       rules: {
         // for configs allow to consume env variables from process.env directly
         'no-restricted-properties': [ 0 ],

.github/workflows/checks.yml

@@ -12,6 +12,7 @@ on:
       - 'docs/**'
       - 'public/**'
       - 'stub/**'
+      - 'tools/**'
 
 # concurrency:
 #   group: ${{ github.workflow }}__${{ github.job }}__${{ github.ref }}

configs/app/app.ts

@@ -9,7 +9,7 @@ const baseUrl = [
   appHost,
   appPort && ':' + appPort,
 ].filter(Boolean).join('');
-const isDev = process.env.NODE_ENV === 'development';
+const isDev = getEnvValue('NODE_ENV') === 'development';
 
 const app = Object.freeze({
   isDev,

configs/app/utils.ts

@@ -4,6 +4,7 @@ import * as regexp from 'lib/regexp';
 export const replaceQuotes = (value: string | undefined) => value?.replaceAll('\'', '"');
 
 export const getEnvValue = (envName: string) => {
+  // eslint-disable-next-line no-restricted-properties
   const envs = isBrowser() ? window.__envs : process.env;
 
   if (isBrowser() && envs.NEXT_PUBLIC_APP_INSTANCE === 'pw') {
@@ -36,8 +37,12 @@ export const getExternalAssetFilePath = (envName: string) => {
 };
 
 export const buildExternalAssetFilePath = (name: string, value: string) => {
-  const fileName = name.replace(/^NEXT_PUBLIC_/, '').replace(/_URL$/, '').toLowerCase();
-  const fileExtension = value.match(regexp.FILE_EXTENSION)?.[1];
-
-  return `/assets/${ fileName }.${ fileExtension }`;
+  try {
+    const fileName = name.replace(/^NEXT_PUBLIC_/, '').replace(/_URL$/, '').toLowerCase();
+    const url = new URL(value);
+    const fileExtension = url.pathname.match(regexp.FILE_EXTENSION)?.[1];
+    return `/assets/${ fileName }.${ fileExtension }`;
+  } catch (error) {
+    return;
+  }
 };

deploy/scripts/download_assets.sh

@@ -37,8 +37,14 @@ get_target_filename() {
     local name_suffix="${name_prefix%_URL}"
     local name_lc="$(echo "$name_suffix" | tr '[:upper:]' '[:lower:]')"
 
-    # Extract the extension from the URL
-    local extension="${url##*.}"
+    # Remove query parameters from the URL and get the filename
+    local filename=$(basename "${url%%\?*}")
+
+    # Extract the extension from the filename
+    local extension="${filename##*.}"
+
+    # Convert the extension to lowercase
+    extension=$(echo "$extension" | tr '[:upper:]' '[:lower:]')
 
     # Construct the custom file name
     echo "$name_lc.$extension"

middleware.ts

@@ -23,7 +23,6 @@ export function middleware(req: NextRequest) {
   const res = NextResponse.next();
   res.headers.append('Content-Security-Policy', cspPolicy);
   res.headers.append('Server-Timing', `middleware;dur=${ end - start }`);
-  // eslint-disable-next-line no-restricted-properties
   res.headers.append('Docker-ID', process.env.HOSTNAME || '');
 
   return res;

ui/address/AddressTxsFilter.tsx

@@ -31,6 +31,7 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }
           isActive={ isOpen || isActive }
           isLoading={ isInitialLoading }
           onClick={ onToggle }
+          appliedFiltersNum={ isActive ? 1 : 0 }
           as="div"
         />
       </MenuButton>

ui/address/contract/ContractCode.tsx

@@ -86,13 +86,23 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
     return <DataFetchAlert/>;
   }
 
-  const canBeVerified = !data?.is_self_destructed && (!data?.is_verified || data.is_partially_verified);
+  const canBeVerified = !data?.is_self_destructed && !data?.is_verified;
 
-  const verificationButton = isPlaceholderData ? <Skeleton w="130px" h={ 8 } mr={ 3 } ml="auto" borderRadius="base"/> : (
+  const verificationButton = isPlaceholderData ? (
+    <Skeleton
+      w="130px"
+      h={ 8 }
+      mr={ data?.is_partially_verified ? 0 : 3 }
+      ml={ data?.is_partially_verified ? 0 : 'auto' }
+      borderRadius="base"
+      flexShrink={ 0 }
+    />
+  ) : (
     <Button
       size="sm"
-      ml="auto"
-      mr={ 3 }
+      mr={ data?.is_partially_verified ? 0 : 3 }
+      ml={ data?.is_partially_verified ? 0 : 'auto' }
+      flexShrink={ 0 }
       as="a"
       href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }
     >
@@ -164,7 +174,10 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
       <Flex flexDir="column" rowGap={ 2 } mb={ 6 } _empty={{ display: 'none' }}>
         { data?.is_verified && (
           <Skeleton isLoaded={ !isPlaceholderData }>
-            <Alert status="success">Contract Source Code Verified ({ data.is_partially_verified ? 'Partial' : 'Exact' } Match)</Alert>
+            <Alert status="success" flexWrap="wrap" rowGap={ 3 } columnGap={ 5 }>
+              <span>Contract Source Code Verified ({ data.is_partially_verified ? 'Partial' : 'Exact' } Match)</span>
+              { data.is_partially_verified ? verificationButton : null }
+            </Alert>
           </Skeleton>
         ) }
         { verificationAlert }

ui/verifiedContracts/VerifiedContractsFilter.tsx

@@ -26,6 +26,7 @@ const VerifiedContractsFilter = ({ onChange, defaultValue, isActive }: Props) =>
       <MenuButton>
         <FilterButton
           isActive={ isOpen || isActive }
+          appliedFiltersNum={ isActive ? 1 : 0 }
           onClick={ onToggle }
           as="div"
         />