Merge pull request #422 from blockscout/packages-update

packages update

lib/link/useCurrentRoute.ts

@@ -4,13 +4,18 @@ import React from 'react';
 import type { RouteName } from 'lib/link/routes';
 import { ROUTES } from 'lib/link/routes';
 
+const PATH_PARAM_REGEXP = /\/:(\w+)/g;
+
 export default function useCurrentRoute() {
   const { route: nextRoute } = useRouter();
 
   return React.useCallback((): RouteName => {
     for (const routeName in ROUTES) {
       const route = ROUTES[routeName as RouteName];
-      if (route.pattern === nextRoute) {
+      const formattedRoute = route.pattern.replace(PATH_PARAM_REGEXP, (_, paramName: string) => {
+        return `/[${ paramName }]`;
+      });
+      if (formattedRoute === nextRoute) {
         return routeName as RouteName;
       }
     }

package.json

@@ -27,13 +27,13 @@
     "test:jest:watch": "jest --watch"
   },
   "dependencies": {
-    "@chakra-ui/react": "2.3.1",
-    "@chakra-ui/theme-tools": "^2.0.2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@chakra-ui/react": "2.4.3",
+    "@chakra-ui/theme-tools": "^2.0.14",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@sentry/nextjs": "^7.12.1",
-    "@sentry/react": "^7.13.0",
-    "@sentry/tracing": "^7.13.0",
+    "@sentry/react": "^7.24.0",
+    "@sentry/tracing": "^7.24.0",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",
@@ -41,15 +41,15 @@
     "d3": "^7.6.1",
     "dayjs": "^1.11.5",
     "ethers": "^5.7.1",
-    "framer-motion": "^6",
+    "framer-motion": "^6.5.1",
     "lodash": "^4.0.0",
     "next": "12.2.5",
     "node-fetch": "^3.2.9",
     "phoenix": "^1.6.15",
     "pino-http": "^8.2.1",
     "pino-pretty": "^9.1.1",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.33.1",
     "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4",

theme/components/Form.ts

 import { formAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { getColor, mode } from '@chakra-ui/theme-tools';
+import { getColor } from '@chakra-ui/theme-tools';
 
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 import FormLabel from './FormLabel';
@@ -13,7 +13,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 
 function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunctionProps) {
   const { theme } = props;
-  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
+  const { focusPlaceholderColor, errorColor } = getDefaultFormColors(props);
 
   const activeLabelStyles = {
     ...FormLabel.variants?.floating?.(props)._focusWithin,
@@ -62,7 +62,7 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
       label: FormLabel.sizes?.[size](props) || {},
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': activeLabelStyles,
       'input[aria-invalid=true] + label, textarea[aria-invalid=true] + label': {
-        color: getColor(theme, ec),
+        color: getColor(theme, errorColor),
       },
 
       // input styles
@@ -78,20 +78,20 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
 
       // indicator styles
       'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
-        color: getColor(theme, fc),
+        color: getColor(theme, focusPlaceholderColor),
       },
       'input[aria-invalid=true] + label .chakra-form__required-indicator, textarea[aria-invalid=true] + label .chakra-form__required-indicator': {
-        color: getColor(theme, ec),
+        color: getColor(theme, errorColor),
       },
     },
   };
 }
 
-const baseStyle = definePartsStyle((props) => {
+const baseStyle = definePartsStyle(() => {
   return {
     requiredIndicator: {
       marginStart: 0,
-      color: mode('gray.500', 'whiteAlpha.400')(props),
+      color: 'gray.500',
     },
   };
 });

theme/components/FormLabel.ts

@@ -19,7 +19,7 @@ const baseStyle = defineStyle({
 
 const variantFloating = defineStyle((props) => {
   const { theme, backgroundColor } = props;
-  const { focusColor: fc } = getDefaultFormColors(props);
+  const { focusPlaceholderColor } = getDefaultFormColors(props);
   const bc = backgroundColor || mode('white', 'black')(props);
 
   return {
@@ -40,7 +40,7 @@ const variantFloating = defineStyle((props) => {
     textOverflow: 'ellipsis',
     _focusWithin: {
       backgroundColor: bc,
-      color: getColor(theme, fc),
+      color: getColor(theme, focusPlaceholderColor),
       fontSize: 'xs',
       lineHeight: '16px',
       borderTopRightRadius: 'none',

theme/components/Popover.ts

@@ -26,6 +26,10 @@ const baseStyleContent = defineStyle((props) => {
     bg: $popperBg.reference,
     [$arrowBg.variable]: $popperBg.reference,
     [$arrowShadowColor.variable]: `colors.${ shadowColor }`,
+    _dark: {
+      [$popperBg.variable]: `colors.gray.900`,
+      [$arrowShadowColor.variable]: `colors.whiteAlpha.300`,
+    },
     width: 'xs',
     border: 'none',
     borderColor: 'inherit',

theme/utils/getDefaultFormColors.ts

@@ -4,7 +4,8 @@ import { mode } from '@chakra-ui/theme-tools';
 export default function getDefaultFormColors(props: StyleFunctionProps) {
   const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props;
   return {
-    focusColor: fc || mode('brand.700', 'brand.300')(props),
+    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
+    focusPlaceholderColor: fc || 'gray.500',
     errorColor: ec || mode('red.400', 'red.300')(props),
     filledColor: flc || mode('gray.300', 'gray.600')(props),
   };

theme/utils/getOutlinedFieldStyles.ts

@@ -6,7 +6,7 @@ import getDefaultTransitionProps from './getDefaultTransitionProps';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
   const { theme, borderColor } = props;
-  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
+  const { focusBorderColor, errorColor } = getDefaultFormColors(props);
   const transitionProps = getDefaultTransitionProps();
 
   return {
@@ -32,12 +32,12 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       },
     },
     _invalid: {
-      borderColor: getColor(theme, ec),
+      borderColor: getColor(theme, errorColor),
       boxShadow: `none`,
     },
     _focusVisible: {
       zIndex: 1,
-      borderColor: getColor(theme, fc),
+      borderColor: getColor(theme, focusBorderColor),
       boxShadow: 'md',
     },
     _placeholder: {

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -112,9 +112,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           isInvalid={ Boolean(errors.name) }
           maxLength={ NAME_MAX_LENGTH }
         />
-        <FormLabel>
-          <InputPlaceholder text="Application name for API key (e.g Web3 project)" error={ errors.name }/>
-        </FormLabel>
+        <InputPlaceholder text="Application name for API key (e.g Web3 project)" error={ errors.name }/>
       </FormControl>
     );
   }, [ errors, formBackgroundColor ]);

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

 import type { InputProps } from '@chakra-ui/react';
-import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
+import { FormControl, Textarea } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
@@ -24,9 +24,7 @@ export default function PublicTagFormComment({ control, error, size }: Props) {
           { ...field }
           isInvalid={ Boolean(error) }
         />
-        <FormLabel>
-          <InputPlaceholder text="Specify the reason for adding tags and color preference(s)" error={ error }/>
-        </FormLabel>
+        <InputPlaceholder text="Specify the reason for adding tags and color preference(s)" error={ error }/>
       </FormControl>
     );
   }, [ error, size ]);