update main fork

configs/sentry/nextjs.ts

@@ -0,0 +1,55 @@
+import type { NextjsOptions } from '@sentry/nextjs/types/utils/nextjsOptions';
+
+const config: NextjsOptions = {
+  environment: process.env.NODE_ENV,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  release: process.env.NEXT_PUBLIC_GIT_COMMIT_SHA,
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+
+  // error filtering settings
+  // were taken from here - https://docs.sentry.io/platforms/node/guides/azure-functions/configuration/filtering/#decluttering-sentry
+  ignoreErrors: [
+    // Random plugins/extensions
+    'top.GLOBALS',
+    // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
+    'originalCreateNotification',
+    'canvas.contentDocument',
+    'MyApp_RemoveAllHighlights',
+    'http://tt.epicplay.com',
+    'Can\'t find variable: ZiteReader',
+    'jigsaw is not defined',
+    'ComboSearch is not defined',
+    'http://loading.retry.widdit.com/',
+    'atomicFindClose',
+    // Facebook borked
+    'fb_xd_fragment',
+    // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
+    // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
+    'bmi_SafeAddOnload',
+    'EBCallBackMessageReceived',
+    // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
+    'conduitPage',
+    // Generic error code from errors outside the security sandbox
+    'Script error.',
+  ],
+  denyUrls: [
+    // Facebook flakiness
+    /graph\.facebook\.com/i,
+    // Facebook blocked
+    /connect\.facebook\.net\/en_US\/all\.js/i,
+    // Woopra flakiness
+    /eatdifferent\.com\.woopra-ns\.com/i,
+    /static\.woopra\.com\/js\/woopra\.js/i,
+    // Chrome extensions
+    /extensions\//i,
+    /^chrome:\/\//i,
+    // Other plugins
+    /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
+    /webappstoolbarba\.texthelp\.com\//i,
+    /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+  ],
+};
+
+export default config;

configs/sentry/react.ts

@@ -0,0 +1,72 @@
+import type * as Sentry from '@sentry/react';
+import { BrowserTracing } from '@sentry/tracing';
+
+import appConfig from 'configs/app';
+
+const feature = appConfig.features.sentry;
+
+export const config: Sentry.BrowserOptions | undefined = (() => {
+  if (!feature.isEnabled) {
+    return;
+  }
+
+  return {
+    environment: feature.environment,
+    dsn: feature.dsn,
+    release: process.env.NEXT_PUBLIC_GIT_TAG || process.env.NEXT_PUBLIC_GIT_COMMIT_SHA,
+    integrations: [ new BrowserTracing() ],
+    // We recommend adjusting this value in production, or using tracesSampler
+    // for finer control
+    tracesSampleRate: 1.0,
+
+    // error filtering settings
+    // were taken from here - https://docs.sentry.io/platforms/node/guides/azure-functions/configuration/filtering/#decluttering-sentry
+    ignoreErrors: [
+      // Random plugins/extensions
+      'top.GLOBALS',
+      // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
+      'originalCreateNotification',
+      'canvas.contentDocument',
+      'MyApp_RemoveAllHighlights',
+      'http://tt.epicplay.com',
+      'Can\'t find variable: ZiteReader',
+      'jigsaw is not defined',
+      'ComboSearch is not defined',
+      'http://loading.retry.widdit.com/',
+      'atomicFindClose',
+      // Facebook borked
+      'fb_xd_fragment',
+      // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
+      // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
+      'bmi_SafeAddOnload',
+      'EBCallBackMessageReceived',
+      // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
+      'conduitPage',
+      // Generic error code from errors outside the security sandbox
+      'Script error.',
+    ],
+    denyUrls: [
+      // Facebook flakiness
+      /graph\.facebook\.com/i,
+      // Facebook blocked
+      /connect\.facebook\.net\/en_US\/all\.js/i,
+      // Woopra flakiness
+      /eatdifferent\.com\.woopra-ns\.com/i,
+      /static\.woopra\.com\/js\/woopra\.js/i,
+      // Chrome extensions
+      /extensions\//i,
+      /^chrome:\/\//i,
+      // Other plugins
+      /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
+      /webappstoolbarba\.texthelp\.com\//i,
+      /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+    ],
+  };
+})();
+
+export function configureScope(scope: Sentry.Scope) {
+  if (!feature.isEnabled) {
+    return;
+  }
+  scope.setTag('app_instance', feature.instance);
+}

deploy/scripts/make_envs_template.sh

@@ -0,0 +1,45 @@
+#!/bin/bash
+
+# Check if the number of arguments provided is correct
+if [ "$#" -ne 1 ]; then
+  echo "Usage: $0 <input_file>"
+  exit 1
+fi
+
+input_file="$1"
+prefix="NEXT_PUBLIC_"
+
+# Function to make the environment variables template file
+# It will read the input file, extract all prefixed string and use them as variables names
+# This variables will have placeholders for their values at buildtime which will be replaced with actual values at runtime
+make_envs_template_file() {
+  output_file=".env.production"
+
+  # Check if file already exists and empty its content if it does
+  if [ -f "$output_file" ]; then
+    > "$output_file"
+  fi
+
+  grep -oE "${prefix}[[:alnum:]_]+" "$input_file" | sort -u | while IFS= read -r var_name; do
+    echo "$var_name=__PLACEHOLDER_FOR_${var_name}__" >> "$output_file"
+  done
+}
+
+# Function to save build-time environment variables to .env file
+save_build-time_envs() {
+  output_file=".env"
+
+  # Check if file already exists and empty its content if it does or create a new one
+  if [ -f "$output_file" ]; then
+    > "$output_file"
+  else
+    touch "$output_file"
+  fi
+
+  env | grep "^${prefix}" | while IFS= read -r line; do
+    echo "$line" >> "$output_file"
+  done
+}
+
+make_envs_template_file
+save_build-time_envs

deploy/scripts/replace_envs.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+# no verbose
+set +x
+
+# config
+envFilename='.env.production'
+nextFolder='./.next/'
+
+# replacing build-stage ENVs with run-stage ENVs
+# https://raphaelpralat.medium.com/system-environment-variables-in-next-js-with-docker-1f0754e04cde
+function replace_envs {
+  # read all config file  
+  while read line; do
+    # no comment or not empty
+    if [ "${line:0:1}" == "#" ] || [ "${line}" == "" ]; then
+      continue
+    fi
+
+    # split
+    configName="$(cut -d'=' -f1 <<<"$line")"
+    configValue="$(cut -d'=' -f2- <<<"$line")"
+    # get system env
+    envValue=$(env | grep "^$configName=" | sed "s/^$configName=//g");
+
+    # if config found
+    if [ -n "$configValue" ]; then
+      # replace all
+      echo "Replace: ${configValue} with: ${envValue}"
+      find $nextFolder \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#$configValue#${envValue-''}#g"
+    fi
+  done < $envFilename
+}
+
+replace_envs

deploy/tools/envs-validator/dev.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+cp ../../../types/envs.ts .
+export NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD)
+export NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0)
+../../scripts/make_envs_template.sh ../../../docs/ENVS.md
+yarn build
+dotenv -e ../../../configs/envs/.env.main -e ../../../configs/envs/.env.secrets yarn validate

lib/hooks/useConfigSentry.tsx

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/react';
+import React from 'react';
+
+import { config, configureScope } from 'configs/sentry/react';
+
+export default function useConfigSentry() {
+  React.useEffect(() => {
+    if (!config) {
+      return;
+    }
+
+    // gotta init sentry in browser
+    Sentry.init(config);
+    Sentry.configureScope(configureScope);
+  }, []);
+}

lib/mixpanel/getGoogleAnalyticsClientId.ts

@@ -0,0 +1,3 @@
+export default function getGoogleAnalyticsClientId() {
+  return window.ga?.getAll()[0].get('clientId');
+}

lib/mixpanel/isGoogleAnalyticsLoaded.ts

@@ -0,0 +1,9 @@
+import config from 'configs/app';
+import delay from 'lib/delay';
+
+export default function isGoogleAnalyticsLoaded(retries = 3): Promise<boolean> {
+  if (!retries || !config.features.googleAnalytics.isEnabled) {
+    return Promise.resolve(false);
+  }
+  return typeof window.ga?.getAll === 'function' ? Promise.resolve(true) : delay(500).then(() => isGoogleAnalyticsLoaded(retries - 1));
+}

lib/tx/sortTxs.ts

@@ -0,0 +1,21 @@
+import type { Transaction } from 'types/api/transaction';
+import type { Sort } from 'types/client/txs-sort';
+
+import compareBns from 'lib/bigint/compareBns';
+
+const sortTxs = (sorting?: Sort) => (tx1: Transaction, tx2: Transaction) => {
+  switch (sorting) {
+    case 'val-desc':
+      return compareBns(tx1.value, tx2.value);
+    case 'val-asc':
+      return compareBns(tx2.value, tx1.value);
+    case 'fee-desc':
+      return compareBns(tx1.fee.value, tx2.fee.value);
+    case 'fee-asc':
+      return compareBns(tx2.fee.value, tx1.fee.value);
+    default:
+      return 0;
+  }
+};
+
+export default sortTxs;

pages/l2-deposits.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const L2Deposits = dynamic(() => import('ui/pages/L2Deposits'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/l2-deposits">
+      <L2Deposits/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';

pages/l2-output-roots.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const L2OutputRoots = dynamic(() => import('ui/pages/L2OutputRoots'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/l2-output-roots">
+      <L2OutputRoots/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';

pages/l2-txn-batches.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const L2TxnBatches = dynamic(() => import('ui/pages/L2TxnBatches'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/l2-txn-batches">
+      <L2TxnBatches/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';

pages/l2-withdrawals.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const L2Withdrawals = dynamic(() => import('ui/pages/L2Withdrawals'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/l2-withdrawals">
+      <L2Withdrawals/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';

pages/txs.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Transactions = dynamic(() => import('ui/pages/Transactions'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/txs">
+      <Transactions/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';

pages/withdrawals.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Withdrawals = dynamic(() => import('ui/pages/Withdrawals'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/withdrawals">
+      <Withdrawals/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { beaconChain as getServerSideProps } from 'nextjs/getServerSideProps';