Merge branch 'main' of github.com:tom2drum/block-scout into mobile-view-pages

.env.example

 API_AUTHORIZATION_TOKEN=xxx
+SENTRY_DSN=xxx
+NEXT_PUBLIC_SENTRY_DSN=xxx
+SENTRY_ORG=block-scout
+SENTRY_PROJECT=new-ui
+SENTRY_AUTH_TOKEN=xxx
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=xxx
 NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 *.tsbuildinfo
 
 .eslintcache
+
+# Sentry
+.sentryclirc

charts/values-frontend.yaml

@@ -22,8 +22,18 @@ resources:
       _default: "0.2"
 
 environment: {}
-  # ENV_NAME:
-  #   _default: value
+  NEXT_PUBLIC_BLOCKSCOUT_VERSION:
+    _default: v4.1.7-beta
+  NEXT_PUBLIC_FOOTER_GITHUB_LINK:
+    _default: https://github.com/blockscout/blockscout
+  NEXT_PUBLIC_FOOTER_TWITTER_LINK:
+    _default: https://www.twitter.com/blockscoutcom
+  NEXT_PUBLIC_FOOTER_TELEGRAM_LINK:
+    _default: https://t.me/poa_network
+  NEXT_PUBLIC_FOOTER_STAKING_LINK:
+    _default: https://duneanalytics.com/maxaleks/xdai-staking
+  NEXT_PUBLIC_SUPPORTED_NETWORKS:
+    _default: [{"name":"Gnosis Chain","type":"xdai","subType":"mainnet","group":"mainnets","isAccountSupported":true},{"name":"Optimism on Gnosis Chain","type":"xdai","subType":"optimism","group":"mainnets"},{"name":"Arbitrum on xDai","type":"xdai","subType":"aox","group":"mainnets"},{"name":"Ethereum","type":"eth","subType":"mainnet","group":"mainnets"},{"name":"Ethereum Classic","type":"etc","subType":"mainnet","group":"mainnets"},{"name":"POA","type":"poa","subType":"core","group":"mainnets"},{"name":"RSK","type":"rsk","subType":"mainnet","group":"mainnets"},{"name":"Gnosis Chain Testnet","type":"xdai","subType":"testnet","group":"testnets","isAccountSupported":true},{"name":"POA Sokol","type":"poa","subType":"sokol","group":"testnets"},{"name":"ARTIS Σ1","type":"artis","subType":"sigma1","group":"other"},{"name":"LUKSO L14","type":"lukso","subType":"l14","group":"other"}]
 
 global:
   env: test

next.config.js

+const { withSentryConfig } = require('@sentry/nextjs');
 const withReactSvg = require('next-react-svg');
 const path = require('path');
 
-module.exports = withReactSvg({
+const moduleExports = {
   include: path.resolve(__dirname, 'icons'),
   reactStrictMode: true,
   webpack(config) {
@@ -17,4 +18,18 @@ module.exports = withReactSvg({
     ];
   },
   output: 'standalone',
-});
+};
+
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  silent: true, // Suppresses all logs
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+module.exports = withReactSvg(withSentryConfig(moduleExports, sentryWebpackPluginOptions));

package.json

@@ -15,6 +15,7 @@
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@sentry/nextjs": "^7.11.1",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",

pages/_error.tsx

+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from '@sentry/nextjs';
+import type { NextPageContext } from 'next';
+import NextErrorComponent from 'next/error';
+import React from 'react';
+
+type ContextOrProps = {
+  req?: NextPageContext['req'];
+  res?: NextPageContext['res'];
+  err?: NextPageContext['err'] | string;
+  pathname?: string;
+  statusCode?: number;
+};
+
+const CustomErrorComponent = (props: { statusCode: number }) => {
+  return <NextErrorComponent statusCode={ props.statusCode }/>;
+};
+
+CustomErrorComponent.getInitialProps = async(contextData: ContextOrProps) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData as NextPageContext);
+};
+
+export default CustomErrorComponent;

sentry.client.config.js

+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

sentry.properties

+defaults.url=https://sentry.io/
+defaults.org=block-scout
+defaults.project=new-ui
+cli.executable=../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

sentry.server.config.js

+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

theme/components/Modal.ts

@@ -8,9 +8,16 @@ const baseStyleDialog: SystemStyleFunction = (props) => {
     padding: 8,
     borderRadius: 'lg',
     bg: mode('white', 'gray.900')(props),
+    margin: 'auto',
   };
 };
 
+const baseStyleDialogContainer = {
+  '::-webkit-scrollbar': { display: 'none' },
+  'scrollbar-width': 'none',
+  '@supports (height: -webkit-fill-available)': { height: '100vh' },
+};
+
 const baseStyleHeader: SystemStyleFunction = (props) => ({
   padding: 0,
   marginBottom: 8,
@@ -47,6 +54,7 @@ const baseStyleOverlay = {
 
 const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   dialog: baseStyleDialog(props),
+  dialogContainer: baseStyleDialogContainer,
   header: baseStyleHeader(props),
   body: baseStyleBody,
   footer: baseStyleFooter,

theme/utils/getOutlinedFieldStyles.ts

@@ -41,7 +41,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       color: mode('blackAlpha.600', 'whiteAlpha.600')(props),
     },
     // not filled input
-    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: borderColor || mode('gray.100', 'gray.700')(props) },
+    ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true])': { borderColor: borderColor || mode('gray.100', 'gray.700')(props) },
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:hover': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:focus': { transition: 'background-color 5000s ease-in-out 0s' },