fix build, sidebar transition and network logo loading state

Dockerfile

@@ -9,7 +9,12 @@ RUN ln -sf /usr/bin/python3 /usr/bin/python
 ### APP
 # Install dependencies
 WORKDIR /app
-COPY package.json yarn.lock ./
+COPY package.json yarn.lock tsconfig.json ./
+COPY types ./types
+COPY lib ./lib
+COPY configs/app ./configs/app
+COPY toolkit/theme ./toolkit/theme
+COPY ui/shared/forms/validators/url.ts ./ui/shared/forms/validators/url.ts
 RUN apk add git
 RUN yarn --frozen-lockfile --network-timeout 100000
 
@@ -80,16 +85,14 @@ RUN yarn build
 ### FEATURE REPORTER
 # Copy dependencies and source code, then build
 COPY --from=deps /feature-reporter/node_modules ./deploy/tools/feature-reporter/node_modules
-# TODO @tom2drum fix feature reporter build
-# RUN cd ./deploy/tools/feature-reporter && yarn compile_config
-# RUN cd ./deploy/tools/feature-reporter && yarn build
+RUN cd ./deploy/tools/feature-reporter && yarn compile_config
+RUN cd ./deploy/tools/feature-reporter && yarn build
 
 
 ### ENV VARIABLES CHECKER
 # Copy dependencies and source code, then build 
 COPY --from=deps /envs-validator/node_modules ./deploy/tools/envs-validator/node_modules
-# TODO @tom2drum fix envs-validator build
-# RUN cd ./deploy/tools/envs-validator && yarn build
+RUN cd ./deploy/tools/envs-validator && yarn build
 
 
 ### FAVICON GENERATOR
@@ -125,10 +128,8 @@ RUN chown nextjs:nodejs .next
 COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
-# TODO @tom2drum fix envs-validator build
-# COPY --from=builder /app/deploy/tools/envs-validator/index.js ./envs-validator.js
-# TODO @tom2drum fix feature reporter build
-# COPY --from=builder /app/deploy/tools/feature-reporter/index.js ./feature-reporter.js
+COPY --from=builder /app/deploy/tools/envs-validator/index.js ./envs-validator.js
+COPY --from=builder /app/deploy/tools/feature-reporter/index.js ./feature-reporter.js
 
 # Copy scripts
 ## Entripoint

configs/envs/.env.eth

@@ -9,6 +9,8 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_COLOR_THEME_DEFAULT=dim
+
 # Instance ENVs
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/

deploy/scripts/entrypoint.sh

@@ -42,16 +42,15 @@ node --no-warnings ./og_image_generator.js
 ./download_assets.sh ./public/assets/configs
 
 # Check run-time ENVs values
-# TODO @tom2drum fix envs-validator build
-# if [ "$SKIP_ENVS_VALIDATION" != "true" ]; then
-#   ./validate_envs.sh
-#   if [ $? -ne 0 ]; then
-#     exit 1
-#   fi
-# else
-#   echo "😱 Skipping ENVs validation."
-#   echo
-# fi
+if [ "$SKIP_ENVS_VALIDATION" != "true" ]; then
+  ./validate_envs.sh
+  if [ $? -ne 0 ]; then
+    exit 1
+  fi
+else
+  echo "😱 Skipping ENVs validation."
+  echo
+fi
 
 # Generate favicons bundle
 ./favicon_generator.sh
@@ -69,8 +68,7 @@ echo
 ./sitemap_generator.sh
 
 # Print list of enabled features
-# TODO @tom2drum fix feature reporter build
-# node ./feature-reporter.js
+node ./feature-reporter.js
 
 echo "Starting Next.js application"
 exec "$@"

deploy/tools/envs-validator/tsconfig.json

@@ -4,6 +4,7 @@
 		"noEmit": false,
 		"target": "es2016",
 		"module": "CommonJS",
+		"moduleResolution": "node",
 		"paths": {
 			"nextjs-routes": ["./nextjs/nextjs-routes.d.ts"],
 		}

deploy/tools/feature-reporter/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "noEmit": false,
     "module": "CommonJS",
+    "moduleResolution": "node",
     "outDir": "./build",
     "paths": {
       "nextjs-routes": ["./nextjs/nextjs-routes.d.ts"],

eslint.config.mjs

@@ -47,7 +47,7 @@ const RESTRICTED_MODULES = {
     {
       name: 'next/link',
       importNames: [ 'default' ],
-      message: 'Please use ui/shared/NextLink component instead',
+      message: 'Please use toolkit/chakra/link component instead',
     },
   ],
   patterns: [

next.config.js

@@ -45,19 +45,6 @@ const moduleExports = {
       'static': 180,
     },
   },
-  typescript: {
-    // TODO @tom2drum remove this once we have fixed all the type errors
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    ignoreBuildErrors: true,
-  },
-  eslint: {
-    // Warning: This allows production builds to successfully complete even if
-    // your project has ESLint errors.
-    ignoreDuringBuilds: true,
-  },
 };
 
 module.exports = withBundleAnalyzer(withRoutes(moduleExports));

toolkit/chakra/select.tsx

@@ -181,7 +181,6 @@ export interface SelectProps extends SelectRootProps {
   loading?: boolean;
 }
 
-// TODO @tom2drum refactor selects
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
   const { collection, placeholder, portalled = true, loading, ...rest } = props;
   return (

toolkit/theme/theme.ts

 import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';
 
-// TODO @tom2drum fix postinstall in CI
-// "postinstall": "chakra typegen ./toolkit/theme/theme.ts",
 import { keyframes } from './foundations/animations';
 import * as borders from './foundations/borders';
 import breakpoints from './foundations/breakpoints';

ui/shared/NextLink.tsx

-// eslint-disable-next-line no-restricted-imports
-import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
-import type { ReactNode } from 'react';
-
-type LinkProps = NextLinkProps & { children?: ReactNode };
-
-// TODO @tom2drum remove this file in favor of toolkit/chakra/link
-const Link = ({ prefetch = false, children, ...rest }: LinkProps) => {
-  return (
-    <NextLink prefetch={ prefetch } { ...rest }>
-      { children }
-    </NextLink>
-  );
-};
-
-export default Link;

ui/shared/chart/ChartWidget.tsx

@@ -7,10 +7,10 @@ import { route, type Route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import { IconButton } from 'toolkit/chakra/icon-button';
+import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
-import NextLink from 'ui/shared/NextLink';
 
 import ChartMenu from './ChartMenu';
 import ChartWidgetContent from './ChartWidgetContent';
@@ -102,9 +102,9 @@ const ChartWidget = ({
     >
       <Flex columnGap={ 6 } mb={ 2 } alignItems="flex-start">
         { href ? (
-          <NextLink href={ href } passHref legacyBehavior >
+          <Link href={ route(href) } variant="plain">
             { chartHeader }
-          </NextLink>
+          </Link>
         ) : chartHeader }
         <Flex ml="auto" columnGap={ 2 }>
           <Tooltip content="Reset zoom">

ui/shared/stats/StatsWidget.tsx

@@ -2,11 +2,12 @@ import { Box, Flex, Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Route } from 'nextjs-routes';
+import { route } from 'nextjs-routes';
 
+import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import Hint from 'ui/shared/Hint';
 import IconSvg, { type IconName } from 'ui/shared/IconSvg';
-import NextLink from 'ui/shared/NextLink';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 export type Props = {
@@ -28,9 +29,9 @@ export type Props = {
 const Container = ({ href, children }: { href?: Route; children: React.JSX.Element }) => {
   if (href) {
     return (
-      <NextLink href={ href } passHref legacyBehavior>
+      <Link href={ route(href) } variant="plain">
         { children }
-      </NextLink>
+      </Link>
     );
   }
 
@@ -62,10 +63,7 @@ const StatsWidget = ({
         borderRadius="base"
         justifyContent="space-between"
         columnGap={ 2 }
-        { ...(href && !isLoading ? {
-          as: 'a',
-          href,
-        } : {}) }
+        w="100%"
       >
         { icon && (
           <IconSvg

ui/snippets/navigation/LightningLabel.tsx

@@ -35,6 +35,9 @@ const LightningLabel = ({ className, iconColor, isCollapsed }: Props) => {
       top={{ lg: isExpanded ? '0' : '10px', xl: isCollapsed ? '10px' : '0' }}
       right={{ lg: isExpanded ? '0' : '15px', xl: isCollapsed ? '15px' : '0' }}
       color={ color }
+      transitionProperty="color, margin-left"
+      transitionDuration="normal"
+      transitionTimingFunction="ease"
     />
   );
 };

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

@@ -26,7 +26,7 @@ const NavigationDesktop = () => {
         maxW={ `${ CONTENT_MAX_WIDTH }px` }
         m="0 auto"
       >
-        <NetworkLogo isCollapsed={ false } w={{ lg: 'auto' }} maxW="120px"/>
+        <NetworkLogo isCollapsed={ false } w={{ lg: '100%' }} maxW="120px"/>
         <TestnetBadge ml={ 3 }/>
         <chakra.nav ml="auto" mr={ config.features.account.isEnabled || config.features.blockchainInteraction.isEnabled ? 8 : 0 }>
           <Flex as="ul" columnGap={ 3 }>

ui/snippets/navigation/useNavLinkStyleProps.tsx

@@ -12,6 +12,9 @@ export default function useNavLinkStyleProps({ isExpanded, isCollapsed, isActive
       display: 'flex',
       ...(isActive ? { 'data-selected': true } : {}),
       borderRadius: 'base',
+      transitionProperty: 'width, padding',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'ease',
     },
     textProps: {
       variant: 'inherit',

ui/snippets/navigation/vertical/NavigationDesktop.tsx

@@ -60,6 +60,9 @@ const NavigationDesktop = () => {
       py={ 12 }
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
       onClick={ handleContainerClick }
+      transitionProperty="width, padding"
+      transitionDuration="normal"
+      transitionTimingFunction="ease"
     >
       <TestnetBadge position="absolute" pl={ 3 } w="49px" top="34px"/>
       <Box
@@ -118,6 +121,9 @@ const NavigationDesktop = () => {
         aria-label="Expand/Collapse menu"
         display="none"
         _groupHover={{ display: 'block' }}
+        transitionProperty="transform, left"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
       />
     </Flex>
   );

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -38,7 +38,6 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
 
 const INVERT_FILTER = 'brightness(0) invert(1)';
 
-// TODO @tom2drum check loading state
 const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
 
   const logoSrc = useColorModeValue(config.UI.navigation.logo.default, config.UI.navigation.logo.dark || config.UI.navigation.logo.default);
@@ -58,23 +57,27 @@ const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
     >
       { /* big logo */ }
       <Image
-        w="auto"
+        w="100%"
         h="100%"
         src={ logoSrc }
         alt={ `${ config.chain.name } network logo` }
         fallback={ <LogoFallback isCollapsed={ isCollapsed }/> }
         display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
         filter={{ _dark: INVERT_FILTER }}
+        objectFit="contain"
+        objectPosition="left"
       />
       { /* small logo */ }
       <Image
-        w="auto"
+        w="100%"
         h="100%"
         src={ iconSrc }
         alt={ `${ config.chain.name } network logo` }
         fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
         display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
         filter={{ _dark: INVERT_FILTER }}
+        objectFit="contain"
+        objectPosition="left"
       />
     </chakra.a>
   );