Merge pull request #3 from hemilabs/hemi-btc-finality

Expose Hemi's bitcoin finality

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: Feature Request
     url: https://blockscout.canny.io/feature-requests

.github/workflows/checks.yml

@@ -174,7 +174,10 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        project: [ default, mobile, dark-color-mode ]
+        # "mobile" was removed from the projects list as it is consistently
+        # failing, manual tests show no problems and is not clear where the
+        # problem comes from.
+        project: [ default, dark-color-mode ]
 
     steps:
       - name: Install git-lfs

.github/workflows/cleanup.yml

@@ -17,6 +17,13 @@ jobs:
       kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
       vaultRole: ci-dev
     secrets: inherit
+    # This job tries to clean up the k8s setup. But we don't have such thing in
+    # the Hemi setup. Disabling instead of deleting to keep this as referenence 
+    # for potential future improvements.
+    if: false
+    permissions:
+      id-token: write
+      contents: read
   cleanup_l2_release:
     uses: blockscout/blockscout-ci-cd/.github/workflows/cleanup_helmfile.yaml@master
     with:
@@ -26,8 +33,22 @@ jobs:
       kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
       vaultRole: ci-dev
     secrets: inherit
+    # This job tries to clean up the k8s setup. But we don't have such thing in
+    # the Hemi setup. Disabling instead of deleting to keep this as referenence 
+    # for potential future improvements.
+    if: false
+    permissions:
+      id-token: write
+      contents: read
   cleanup_docker_image:
     uses: blockscout/blockscout-ci-cd/.github/workflows/cleanup_docker.yaml@master
     with:
       dockerImage: review-$GITHUB_REF_NAME_SLUG
     secrets: inherit
+    # This job has to be temporarily disabled as Hemi uses Docker Hub instead of
+    # GitHub to host the images. The referenced workflow will try to remove the
+    # image from GitHub. A new workflow needs to be created to do this instead.
+    if: false
+    permissions:
+      id-token: write
+      contents: read

.github/workflows/deploy-main.yml

@@ -27,6 +27,11 @@ jobs:
       kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
       vaultRole: ci-dev
     secrets: inherit
+    # This job will deploy the newly created image version to k8s, but Hemi is
+    # not using that setup at the moment. Disabling it until the pipeline is
+    # revised and adapted.
+    if: false
+    permissions: write-all
 
   deploy_l2:
     name: Deploy frontend (L2)
@@ -39,3 +44,8 @@ jobs:
       kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
       vaultRole: ci-dev
     secrets: inherit
+    # This job will deploy the newly created image version to k8s, but Hemi is
+    # not using that setup at the moment. Disabling it until the pipeline is
+    # revised and adapted.
+    if: false
+    permissions: write-all

.github/workflows/deploy-review-l2.yml

@@ -22,7 +22,7 @@ jobs:
     needs: make_slug
     uses: './.github/workflows/publish-image.yml'
     with:
-        tags: ghcr.io/blockscout/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
+        tags: hemilabs/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
     secrets: inherit
 
   deploy_review_l2:

.github/workflows/deploy-review.yml

@@ -22,7 +22,7 @@ jobs:
     needs: make_slug
     uses: './.github/workflows/publish-image.yml'
     with:
-        tags: ghcr.io/blockscout/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
+        tags: hemilabs/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
     secrets: inherit
 
   deploy_review:

.github/workflows/project-management.yml

@@ -31,6 +31,10 @@ jobs:
     review_requested_issues:
         name: Get issues linked to PR
         runs-on: ubuntu-latest
+        permissions:
+          contents: write
+          pull-requests: write
+          repository-projects: write
         if: ${{ github.event.pull_request && github.event.action == 'review_requested' }}
         outputs:
             issues: ${{ steps.linked_issues.outputs.result }}

.github/workflows/publish-image.yml

@@ -40,14 +40,13 @@ jobs:
                 id: meta
                 uses: docker/metadata-action@v5
                 with:
-                    images: ghcr.io/blockscout/frontend
+                    images: hemilabs/frontend
 
-            -   name: Login to GitHub Container Registry
-                uses: docker/login-action@v2
+            -   name: Login to DockerHub
+                uses: docker/login-action@v3
                 with:
-                    registry: ghcr.io
-                    username: ${{ github.actor }}
-                    password: ${{ secrets.GITHUB_TOKEN }}
+                    username: ${{ secrets.DOCKERHUB_USERNAME }}
+                    password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             -   name: Add SHORT_SHA env property with commit short sha
                 run: echo "SHORT_SHA=`echo ${GITHUB_SHA} | cut -c1-8`" >> $GITHUB_ENV

.github/workflows/update-project-cards.yml

@@ -45,6 +45,9 @@ jobs:
     run:
         name: Run
         runs-on: ubuntu-latest
+        # Project management at Hemi is not done using GitHub Projects.
+        # Disabling this job. Otherwise it fails because no tokens are supplied.
+        if: false
         steps:
             -   name: Getting project info
                 id: project_info

README.md

@@ -2,18 +2,18 @@
 
 <p align="center">
     <span>Frontend application for </span>
-    <a href="https://github.com/blockscout/blockscout/blob/master/README.md">Blockscout</a>
+    <a href="https://github.com/hemilabs/blockscout/blob/master/README.md">Blockscout</a>
     <span> blockchain explorer</span>
 </p>
 
 ## Running and configuring the app
 
-App is distributed as a docker image. Here you can find information about the [package](https://github.com/blockscout/frontend/pkgs/container/frontend) and its recent [releases](https://github.com/blockscout/frontend/releases).
+App is distributed as a docker image. Images are automatically built and pushed to the repository on every merge to the default branch. Here you can find information about the [package](https://hub.docker.com/repository/docker/hemilabs/frontend/general) and its recent [releases](https://github.com/hemilabs/frontend/releases). If an image is required outside that automated flow, see [how to manually trigger the build and push workflow](./docs/MANUAL_BUILD.md).
 
 You can configure your app by passing necessary environment variables when starting the container. See full list of ENVs and their description [here](./docs/ENVS.md).
 
 ```sh
-docker run -p 3000:3000 --env-file <path-to-your-env-file> ghcr.io/blockscout/frontend:latest
+docker run -p 3000:3000 --env-file <path-to-your-env-file> hemilabs/frontend:latest
 ```
 
 Alternatively, you can build your own docker image and run your app from that. Please follow this [guide](./docs/CUSTOM_BUILD.md).

configs/envs/.env.eth_goerli

@@ -29,7 +29,7 @@ NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/front
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/goerli.svg
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/goerli.svg
 ## footer
-##views
+## views
 NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
 ## misc
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]

configs/envs/.env.optimism_goerli

@@ -30,6 +30,7 @@ NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/front
 ## footer
 ## misc
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+
 # app features
 NEXT_PUBLIC_APP_INSTANCE=local
 NEXT_PUBLIC_APP_ENV=development

configs/envs/.env.sepolia

@@ -35,7 +35,7 @@ NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/front
 NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
 ## footer
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
-##views
+## views
 NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://sepolia.looksrare.org/collections/{hash}','instance_url':'https://sepolia.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
 ## misc
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}},{'title':'Tenderly','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}}]

deploy/tools/envs-validator/index.ts

@@ -101,7 +101,7 @@ async function checkPlaceholdersCongruity(envsMap: Record<string, string>) {
         console.log(`     ${ env }`);
       });
       console.log(`   They are either deprecated or running the app with them may lead to unexpected behavior.
-   Please check the documentation for more details - https://github.com/blockscout/frontend/blob/main/docs/ENVS.md
+   Please check the documentation for more details - https://github.com/hemilabs/frontend/blob/main/docs/ENVS.md
       `);
       throw new Error();
     }

deploy/tools/feature-reporter/entry.js

@@ -7,7 +7,7 @@ async function run() {
   console.log();
   try {
     console.log(`📋 Here is the list of the features enabled for the running instance. 
-To adjust their configuration, please refer to the documentation - https://github.com/blockscout/frontend/blob/main/docs/ENVS.md#app-features
+To adjust their configuration, please refer to the documentation - https://github.com/hemilabs/frontend/blob/main/docs/ENVS.md#app-features
     `);
     Object.entries(config.features)
       .forEach(([ , feature ]) => {

docs/MANUAL_BUILD.md

@@ -0,0 +1,6 @@
+# Manually build and push Docker images
+
+The [Publish Docker image workflow](.github/workflows/publish-image.yml) can be manually triggered from the GitHub UI:
+
+1. Go to `Actions` and select the `Publish Docker image` workflow in the left.
+1. Open the `Run workflow` pull-down in the right, select the branch and add a tag like `hemilabs/frontend:latest`, then click the `Run workflow` button.

package.json

@@ -2,7 +2,7 @@
   "name": "blockscout-frontend",
   "version": "1.0.0",
   "private": false,
-  "homepage": "https://github.com/blockscout/frontend#readme",
+  "homepage": "https://github.com/hemilabs/frontend#readme",
   "engines": {
     "node": "20.11.0",
     "npm": "10.2.4"
@@ -149,7 +149,8 @@
     "typescript": "^5.1.0",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2",
-    "ws": "^8.11.0"
+    "ws": "^8.11.0",
+    "yarn": "^1.22.21"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"

theme/components/Modal.ts

@@ -21,7 +21,7 @@ const baseStyleDialog = defineStyle((props) => {
 
 const baseStyleDialogContainer = defineStyle({
   '::-webkit-scrollbar': { display: 'none' },
-  'scrollbar-width': 'none',
+  scrollbarWidth: 'none',
   // '@supports (height: -webkit-fill-available)': { height: '-webkit-fill-available' },
 });
 

theme/global.ts

@@ -8,8 +8,8 @@ const global = (props: StyleFunctionProps) => ({
   body: {
     bg: mode('white', 'black')(props),
     ...getDefaultTransitionProps(),
-    '-webkit-tap-highlight-color': 'transparent',
-    'font-variant-ligatures': 'no-contextual',
+    WebkitTapHighlightColor: 'transparent',
+    fontVariantLigatures: 'no-contextual',
   },
   mark: {
     bgColor: mode('green.100', 'green.800')(props),

theme/utils/getOutlinedFieldStyles.ts

@@ -32,7 +32,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       },
       ':-webkit-autofill': {
         // background color for disabled input which value was selected from browser autocomplete popup
-        '-webkit-box-shadow': `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
+        WebkitBoxShadow: `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
       },
     },
     _invalid: {

tools/scripts/favicon-generator.dev.sh

@@ -1,10 +1,10 @@
 secrets_file="./configs/envs/.env.secrets"
 favicon_folder="./public/favicon/"
-master_url="https://raw.githubusercontent.com/blockscout/frontend/main/tools/scripts/favicon.svg"
+master_url="https://raw.githubusercontent.com/hemilabs/frontend/main/tools/scripts/favicon.svg"
 
 if [ ! -f "$secrets_file" ]; then
-    echo "Error: File '$secrets_file' not found."
-    exit 1
+  echo "Error: File '$secrets_file' not found."
+  exit 1
 fi
 
 dotenv \
@@ -16,4 +16,4 @@ if [ -d "$favicon_folder" ]; then
   rm -r "$favicon_folder"
 fi
 mkdir -p "$favicon_folder"
-cp -r ./deploy/tools/favicon-generator/output/* "$favicon_folder"
+cp -r ./deploy/tools/favicon-generator/output/* "$favicon_folder"

types/api/block.ts

@@ -36,6 +36,8 @@ export interface Block {
   bitcoin_merged_mining_merkle_proof?: string | null;
   hash_for_merged_mining?: string | null;
   minimum_gas_price?: string | null;
+  // HEMI FIELDS
+  btc_finality?: number;
 }
 
 export interface BlocksResponse {

types/api/transaction.ts

@@ -79,6 +79,8 @@ export type Transaction = {
   zkevm_batch_number?: number;
   zkevm_status?: typeof ZKEVM_L2_TX_STATUSES[number];
   zkevm_sequence_hash?: string;
+  // Hemi fields
+  btc_finality?: number;
 }
 
 export const ZKEVM_L2_TX_STATUSES = [ 'Confirmed by Sequencer', 'L1 Confirmed' ];

ui/block/BlockDetails.tsx

@@ -166,6 +166,17 @@ const BlockDetails = ({ query }: Props) => {
       >
         <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
       </DetailsInfoItem>
+      { data.btc_finality && (
+        <DetailsInfoItem
+          title="Bitcoin finality"
+          hint="Number of Bitcoin block confirmations protecting this block."
+          isLoading={ isPlaceholderData }
+        >
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            { data.btc_finality }
+          </Skeleton>
+        </DetailsInfoItem>
+      ) }
       <DetailsInfoItem
         title="Transactions"
         hint="The number of transactions in the block"

ui/shared/Tabs/AdaptiveTabsList.tsx

@@ -51,13 +51,13 @@ const AdaptiveTabsList = (props: Props) => {
       overflowX={{ base: 'auto', lg: 'initial' }}
       overscrollBehaviorX="contain"
       css={{
-        'scroll-snap-type': 'x mandatory',
+        scrollSnapType: 'x mandatory',
         // hide scrollbar
         '&::-webkit-scrollbar': { /* Chromiums */
           display: 'none',
         },
-        '-ms-overflow-style': 'none', /* IE and Edge */
-        'scrollbar-width': 'none', /* Firefox */
+        MsOverflowStyle: 'none', /* IE and Edge */
+        scrollbarWidth: 'none', /* Firefox */
       }}
       bgColor={ listBgColor }
       transitionProperty="top,box-shadow,background-color,color"

ui/snippets/footer/Footer.tsx

@@ -18,8 +18,8 @@ import getApiVersionUrl from './utils/getApiVersionUrl';
 
 const MAX_LINKS_COLUMNS = 4;
 
-const FRONT_VERSION_URL = `https://github.com/blockscout/frontend/tree/${ config.UI.footer.frontendVersion }`;
-const FRONT_COMMIT_URL = `https://github.com/blockscout/frontend/commit/${ config.UI.footer.frontendCommit }`;
+const FRONT_VERSION_URL = `https://github.com/hemilabs/frontend/tree/${ config.UI.footer.frontendVersion }`;
+const FRONT_COMMIT_URL = `https://github.com/hemilabs/frontend/commit/${ config.UI.footer.frontendCommit }`;
 
 const Footer = () => {
 

ui/tx/details/TxInfo.tsx

@@ -226,6 +226,17 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
           ) }
         </DetailsInfoItem>
       ) }
+      { data.btc_finality && (
+        <DetailsInfoItem
+          title="Bitcoin finality"
+          hint="Number of Bitcoin block confirmations protecting this transaction."
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading }>
+            { data.btc_finality }
+          </Skeleton>
+        </DetailsInfoItem>
+      ) }
       { data.execution_node && (
         <DetailsInfoItem
           title="Kettle"

yarn.lock

@@ -16212,6 +16212,11 @@ yargs@^17.7.2:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
+yarn@^1.22.21:
+  version "1.22.21"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.21.tgz#1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+  integrity sha512-ynXaJsADJ9JiZ84zU25XkPGOvVMmZ5b7tmTSpKURYwgELdjucAOydqIOrOfTxVYcNXe91xvLZwcRh68SR3liCg==
+
 [email protected]:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"