Update otterscan

.github/workflows/build-and-prettier.yml

@@ -0,0 +1,26 @@
+name: Build and Prettier
+on:
+  pull_request:
+    types: [opened, synchronize]
+  push:
+    branches:
+      - develop
+      - main
+  workflow_dispatch:
+jobs:
+  check-prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "npm"
+      - name: Install packages
+        run: npm ci
+      - name: Run prettier
+        run: npx prettier -c .
+      - name: Build Otterscan
+        run: npm run build

.github/workflows/end-to-end.yaml

@@ -0,0 +1,112 @@
+name: End-to-End Tests
+on:
+  pull_request:
+    types: [opened, synchronize]
+  push:
+    branches:
+      - develop
+      - main
+  workflow_dispatch:
+jobs:
+  check-secrets:
+    runs-on: ubuntu-latest
+    outputs:
+      e2e-erigon-url: ${{ steps.e2e-erigon-url.outputs.defined }}
+      e2e-cypress-record-key: ${{ steps.e2e-cypress-record-key.outputs.defined }}
+    steps:
+      - name: Check if E2E_ERIGON_URL is available
+        id: e2e-erigon-url
+        env:
+          E2E_ERIGON_URL: ${{ secrets.E2E_ERIGON_URL }}
+        if: "${{ env.E2E_ERIGON_URL != '' }}"
+        run: echo "defined=true" >> $GITHUB_OUTPUT
+      - name: Check if E2E_CYPRESS_RECORD_KEY is available
+        id: e2e-cypress-record-key
+        env:
+          E2E_CYPRESS_RECORD_KEY: ${{ secrets.E2E_CYPRESS_RECORD_KEY }}
+        if: "${{ env.E2E_CYPRESS_RECORD_KEY != '' }}"
+        run: echo "defined=true" >> $GITHUB_OUTPUT
+
+  e2e-test-mainnet:
+    name: Run E2E tests on mainnet
+    runs-on: ubuntu-latest
+    if: ${{ needs.check-secrets.outputs.e2e-erigon-url == 'true' }}
+    needs: [check-secrets]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up xvfb
+        run: |
+          sudo apt update
+          sudo apt install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+
+      - name: Run Cypress tests on mainnet
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm start
+          wait-on: "http://localhost:5173"
+          spec: "cypress/e2e/mainnet/**/*.cy.ts,cypress/e2e/*.cy.ts"
+          tag: ${{needs.check-secrets.outputs.e2e-cypress-record-key == 'true' && 'mainnet' || ''}}
+          record: |
+            ${{needs.check-secrets.outputs.e2e-cypress-record-key == 'true' && 'true' || 'false'}}
+        env:
+          VITE_ERIGON_URL: ${{secrets.E2E_ERIGON_URL}}
+          CYPRESS_RECORD_KEY: ${{secrets.E2E_CYPRESS_RECORD_KEY}}
+      - name: Upload screenshots from failing tests
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: Cypress Mainnet Screenshots
+          path: cypress/screenshots
+
+  e2e-test-devnet:
+    name: Run E2E tests on a devnet
+    runs-on: ubuntu-latest
+    needs: [check-secrets]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up xvfb
+        run: |
+          sudo apt update
+          sudo apt install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+
+      - name: Download Erigon
+        run: git clone --branch release/2.54 --single-branch https://github.com/ledgerwatch/erigon.git
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version-file: "erigon/go.mod"
+          cache-dependency-path: "erigon/go.sum"
+      - name: Build Erigon
+        run: |
+          cd erigon
+          make erigon
+      - name: Load devnet config
+        id: load-devnet-config
+        run: |
+          OTTERSCAN_CONFIG="$(cat cypress/support/devnet-config.json | sed 's/localhost/127.0.0.1/')"
+          OTTERSCAN_CONFIG=$(echo $OTTERSCAN_CONFIG)
+          echo "config=$OTTERSCAN_CONFIG" >> $GITHUB_OUTPUT
+      - name: Run Cypress tests on devnet
+        uses: cypress-io/github-action@v6
+        with:
+          start: |
+            sh ./scripts/run-erigon-devnet-e2e-tests.sh
+            npm run start
+          wait-on: "http://127.0.0.1:8545, http://localhost:5173"
+          spec: "cypress/e2e/devnet/**/*.cy.ts,cypress/e2e/*.cy.ts"
+          tag: ${{needs.check-secrets.outputs.e2e-cypress-record-key == 'true' && 'devnet' || ''}}
+          record: |
+            ${{needs.check-secrets.outputs.e2e-cypress-record-key == 'true' && 'true' || 'false'}}
+        env:
+          VITE_CONFIG_JSON: ${{steps.load-devnet-config.outputs.config}}
+          CYPRESS_RECORD_KEY: ${{secrets.E2E_CYPRESS_RECORD_KEY}}
+          CYPRESS_DEVNET_ERIGON_URL: "http://127.0.0.1:8545"
+          CYPRESS_DEVNET_SOURCIFY_SOURCE: "http://127.0.0.1:7077"
+      - name: Upload screenshots from failing tests
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: Cypress Devnet Screenshots
+          path: cypress/screenshots

.gitignore

@@ -1,4 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Vite cache
+.vite/
 
 # emacs backups
 *~
@@ -12,6 +14,9 @@
 
 # testing
 /coverage
+/storybook-static
+/cypress/screenshots
+/cypress/videos
 
 # production
 /build

.storybook/main.ts

@@ -17,6 +17,9 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgen: false,
   },
+  core: {
+    disableTelemetry: true,
+  },
 };
 
 export default config;

.storybook/preview-head.html

@@ -1,3 +1,3 @@
 <script>
   window.global = window;
-</script>
+</script>

.storybook/preview.tsx

@@ -1,12 +1,11 @@
-import React from "react";
-import { Decorator } from "@storybook/react";
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
-import { BrowserRouter as Router } from "react-router-dom";
 import "@fontsource/fira-code/index.css";
-import "@fontsource/space-grotesk/index.css";
-import "@fontsource/roboto/index.css";
 import "@fontsource/roboto-mono/index.css";
+import "@fontsource/roboto/index.css";
 import "@fontsource/space-grotesk/files/space-grotesk-latin-400-normal.woff2";
+import "@fontsource/space-grotesk/index.css";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { Decorator } from "@storybook/react";
+import { BrowserRouter as Router } from "react-router-dom";
 import "../src/index.css";
 
 export const parameters = {

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:20.8.1-alpine3.17 AS builder
+FROM node:20.10.0-alpine3.17 AS builder
 WORKDIR /otterscan-build
-COPY ["package.json", "package-lock.json", "/otterscan-build/"]
-RUN npm ci
-COPY ["run-nginx.sh", "tsconfig.json", "tsconfig.node.json", "postcss.config.js", "tailwind.config.js", "vite.config.ts", "index.html", "/otterscan-build/"]
-COPY ["public", "/otterscan-build/public/"]
-COPY ["src", "/otterscan-build/src/"]
+COPY --link ["package.json", "package-lock.json", "/otterscan-build/"]
+RUN npm ci --fetch-timeout 600000 --verbose
+COPY --link ["run-nginx.sh", "tsconfig.json", "tsconfig.node.json", "postcss.config.js", "tailwind.config.js", "vite.config.ts", "index.html", "/otterscan-build/"]
+COPY --link ["public", "/otterscan-build/public/"]
+COPY --link ["src", "/otterscan-build/src/"]
 RUN npm run build
 
 # Add brotli module to official nginx image
@@ -71,14 +71,14 @@ RUN set -ex \
     && rm -rf /tmp/packages
 RUN apk update && apk add jq
 WORKDIR /usr/share/nginx/html/
-COPY --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/chains chains/
-COPY --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/topic0 topic0/
-COPY --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/assets assets/
-COPY --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/signatures signatures/
-COPY nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
-COPY nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder /otterscan-build/dist /usr/share/nginx/html/
-COPY --from=builder /otterscan-build/run-nginx.sh /
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/chains chains/
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/topic0 topic0/
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/assets assets/
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/signatures signatures/
+COPY --link nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+COPY --link nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --link --from=builder /otterscan-build/dist /usr/share/nginx/html/
+COPY --link --from=builder /otterscan-build/run-nginx.sh /
 WORKDIR /
 
 CMD ["/run-nginx.sh"]

README.md

@@ -118,4 +118,6 @@ Follow the creator on Twitter for more updates ([@wmitsuda](https://twitter.com/
 
 ### Donation address
 
-If you like this project, feel free to send donations to `otterscan.eth` or use our gitcoin grant page: https://gitcoin.co/grants/3224/otterscan
+If you like this project, feel free to send donations to `otterscan.eth` on any EVM chain (it's an EOA).
+
+We also participate regularly on Gitcoin Grants rounds.

cypress.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from "cypress";
+import fs from "fs";
+
+export default defineConfig({
+  e2e: {
+    projectId: "rypdvn",
+    setupNodeEvents(on, config) {
+      on(
+        "after:spec",
+        (spec: Cypress.Spec, results: CypressCommandLine.RunResult) => {
+          if (results && results.video) {
+            // Do we have failures for any retry attempts?
+            const failures = results.tests.some((test) =>
+              test.attempts.some((attempt) => attempt.state === "failed"),
+            );
+            if (!failures) {
+              // delete the video if the spec passed and no tests retried
+              fs.unlinkSync(results.video);
+            }
+          }
+        },
+      );
+      on("task", {
+        // Run cy.task('log', <message>) to log something to stdout
+        log(message) {
+          console.log(message);
+          return null;
+        },
+      });
+    },
+    baseUrl: "http://localhost:5173",
+    // SyntaxHighlighter files may take several seconds to load in dev mode
+    defaultCommandTimeout: 8_000,
+    video: true,
+    env: {
+      DEVNET_ERIGON_URL: "http://localhost:8545",
+      DEVNET_SOURCIFY_SOURCE: "http://localhost:7077",
+    },
+  },
+});

cypress/e2e/devnet/spec.cy.ts

@@ -0,0 +1,28 @@
+describe("Devnet tests", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+  it("Has a warning header with the chain ID", () => {
+    cy.get('[data-test="warning-header-network-name"]').contains(
+      "You are on ChainID: 1337",
+    );
+  });
+  it("Can navigate to a transaction's Trace tab and back", () => {
+    cy.sendTx({
+      to: "0x67b1d87101671b127f5f8714789C7192f7ad340e",
+    }).then(({ txReceipt }) => {
+      cy.visit("/tx/" + txReceipt.hash);
+      // Click Trace button and make sure the trace loads
+      cy.get("a").contains("Trace").click();
+      cy.get("span").contains("<fallback>");
+      cy.location("pathname").should(
+        "equal",
+        "/tx/" + txReceipt.hash + "/trace",
+      );
+      // Go back to the Overview tab
+      cy.get("a").contains("Overview").click();
+      cy.location("pathname").should("equal", "/tx/" + txReceipt.hash);
+      cy.get('[data-test="tx-hash"]').contains(txReceipt.hash);
+    });
+  });
+});