feat: add docker ci

.env.example

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_FINALITY_GADGET_API_URL=http://localhost:8080
 NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=true

.github/workflows/docker-publish.yml

@@ -0,0 +1,77 @@
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  push:
+    branches: ["main"]
+    # Publish semver tags as releases.
+    tags: ["v*.*.*"]
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: docker.io
+  # Remove the slash at the end of the username
+  IMAGE_NAME: ${{ secrets.DOCKER_HUB_USERNAME }}/${{ github.event.repository.name }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Set up QEMU for multi-architecture support
+      # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      # Set up BuildKit Docker container builder to be able to build
+      # multi-platform images and export cache
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Login against a Docker registry
+      # https://github.com/docker/login-action
+      - name: Log into Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=sha
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          context: .
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

Dockerfile

@@ -15,9 +15,9 @@ COPY tailwind.config.ts .
 COPY postcss.config.js .
 COPY .env.example ./.env
 # Replace the variables in the .env file
-ARG NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_FINALITY_GADGET_API_URL
 ARG NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES
-RUN sed -i "s|NEXT_PUBLIC_API_URL=.*|NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}|g" .env
+RUN sed -i "s|NEXT_PUBLIC_FINALITY_GADGET_API_URL=.*|NEXT_PUBLIC_FINALITY_GADGET_API_URL=${NEXT_PUBLIC_FINALITY_GADGET_API_URL}|g" .env
 RUN sed -i "s|NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=.*|NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=${NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES}|g" .env
 
 RUN npm run build

Makefile

@@ -6,7 +6,7 @@ build: npm run build
 build-docker:
 	$(DOCKER) build \
 	--tag snapchain/finality-explorer \
-	--build-arg NEXT_PUBLIC_API_URL=$$(grep NEXT_PUBLIC_API_URL .env | cut -d '=' -f2) \
+	--build-arg NEXT_PUBLIC_FINALITY_GADGET_API_URL=$$(grep NEXT_PUBLIC_FINALITY_GADGET_API_URL .env | cut -d '=' -f2) \
 	--build-arg NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=$$(grep NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES .env | cut -d '=' -f2) \
 	-f Dockerfile \
 	$(GIT_ROOT)

README.md

@@ -13,7 +13,7 @@ cp .env.example .env.local
 
 where,
 
-- `NEXT_PUBLIC_API_URL` specifies the back-end API for the finality gadget
+- `NEXT_PUBLIC_FINALITY_GADGET_API_URL` specifies the back-end API for the finality gadget
 - `NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES` boolean value to indicate whether display 
 testing network related message. Default to true
 

docker-compose.yml

@@ -4,12 +4,15 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        - NEXT_PUBLIC_API_URL=http://35.193.78.151:18080
+        - NEXT_PUBLIC_FINALITY_GADGET_API_URL=${NEXT_PUBLIC_FINALITY_GADGET_API_URL}
         - NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=true
     image: snapchain/finality-explorer:latest
     ports:
       - "13000:3000"
     environment:
       - NODE_ENV=production
       - NEXT_TELEMETRY_DISABLED=1
+      - NEXT_PUBLIC_FINALITY_GADGET_API_URL=${NEXT_PUBLIC_FINALITY_GADGET_API_URL}
+    env_file:
+      - .env
     restart: unless-stopped

src/app/api/apiWrapper.ts

@@ -22,12 +22,8 @@ export const apiWrapper = async (
 
   try {
     // destructure params in case of post request
-    console.log(
-      "process.env.NEXT_PUBLIC_API_URL",
-      process.env.NEXT_PUBLIC_API_URL,
-    );
     response = await handler(
-      `${process.env.NEXT_PUBLIC_API_URL}${url}`,
+      `${process.env.NEXT_PUBLIC_FINALITY_GADGET_API_URL}${url}`,
       method === "POST"
         ? { ...params }
         : {

src/app/api/getChainSyncStatus.ts

@@ -0,0 +1,13 @@
+import { ChainSyncStatus } from "../types/chainSyncStatus";
+
+import { apiWrapper } from "./apiWrapper";
+
+export const getChainSyncStatus = async (): Promise<ChainSyncStatus> => {
+  const response = await apiWrapper(
+    "GET",
+    `/v1/chainSyncStatus`,
+    "Error fetching chain sync status",
+  );
+
+  return response.data;
+};

src/app/api/healthCheckClient.ts

@@ -6,7 +6,7 @@ interface HealthCheckResponse {
 
 export const fetchHealthCheck = async (): Promise<HealthCheckResponse> => {
   const response = await axios.get(
-    `${process.env.NEXT_PUBLIC_API_URL}/healthcheck`,
+    `${process.env.NEXT_PUBLIC_FINALITY_GADGET_API_URL}/healthcheck`,
   );
   return response.data;
 };

src/app/components/Modals/ErrorModal.tsx

@@ -90,7 +90,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
         </button>
       </div>
       <div className="flex flex-col justify-center gap-4">
-        <h3 className="text-center font-bold text-error">{getErrorTitle()}</h3>
+        <h3 className="text-center font-bold">{getErrorTitle()}</h3>
         <div className="flex flex-col gap-3">
           <p className="text-center">{getErrorMessage()}</p>
         </div>

src/app/components/Modals/RPCModal.tsx

@@ -1,10 +1,10 @@
 interface RPCModalProps {}
 
 export const RPCModal: React.FC<RPCModalProps> = () => {
-  const rpcAddress = process.env.NEXT_PUBLIC_API_URL;
+  const rpcAddress = process.env.NEXT_PUBLIC_FINALITY_GADGET_API_URL;
   return (
     <div className="outline-none items-stretch hidden sm:flex">
-      <div className="flex items-center rounded-lg border border-primary bg-[#fdf2ec] p-2 dark:border-white dark:bg-base-200 text-sm">
+      <div className="flex items-center rounded-lg border border-primary bg-[#f6ffe9] p-2 dark:border-white dark:bg-base-200 text-sm">
         {rpcAddress}
       </div>
     </div>

src/app/components/Stats/Stats.tsx

@@ -0,0 +1,101 @@
+import Image from "next/image";
+import { Fragment } from "react";
+import { AiOutlineInfoCircle } from "react-icons/ai";
+import { Tooltip } from "react-tooltip";
+
+import { ChainSyncStatus } from "@/app/types/chainSyncStatus";
+
+import blockIcon from "./icons/block.svg";
+
+interface StatsProps {
+  chainSyncStatus: ChainSyncStatus | undefined;
+}
+
+export const Stats: React.FC<StatsProps> = ({ chainSyncStatus }) => {
+  const sections = [
+    [
+      {
+        title: "Latest",
+        value: chainSyncStatus?.latest_block,
+        icon: blockIcon,
+        tooltip: "Latest L2 block number",
+      },
+      {
+        title: "ETH Finalized",
+        value: chainSyncStatus?.latest_eth_finalized_block,
+        icon: blockIcon,
+        tooltip: "Latest ETH finalized L2 block number",
+      },
+      {
+        title: "Earliest BTC Finalized",
+        value: chainSyncStatus?.earliest_btc_finalized_block,
+        icon: blockIcon,
+        tooltip: "Earliest consecutively BTC finalized L2 block number",
+      },
+      {
+        title: "Latest BTC Finalized",
+        value: chainSyncStatus?.latest_btc_finalized_block,
+        icon: blockIcon,
+        tooltip: "Latest BTC finalized L2 block number",
+      },
+    ],
+  ];
+
+  return (
+    <div className="card flex flex-col gap-4 bg-base-300 p-1 shadow-sm lg:flex-row lg:justify-between">
+      <div className="flex items-center gap-2 md:flex-1 md:flex-col lg:flex-initial lg:flex-row flex-wrap justify-center p-5">
+        <strong>Block Status</strong>
+      </div>
+      {sections.map((section, index) => (
+        <div
+          key={index}
+          className="card flex justify-between bg-base-400 p-4 text-sm md:flex-row"
+        >
+          {section.map((subSection, subIndex) => (
+            <Fragment key={subSection.title}>
+              <div className="flex items-center gap-2 md:flex-1 md:flex-col lg:flex-initial lg:flex-row flex-wrap justify-center">
+                <div className="flex items-center gap-2">
+                  <Image src={subSection.icon} alt={subSection.title} />
+                  <div className="flex items-center gap-1">
+                    <p className="dark:text-neutral-content">
+                      {subSection.title}
+                    </p>
+                    {subSection.tooltip && (
+                      <>
+                        <span
+                          className="cursor-pointer text-xs"
+                          data-tooltip-id={`tooltip-${subSection.title}`}
+                          data-tooltip-content={subSection.tooltip}
+                          data-tooltip-place="top"
+                        >
+                          <AiOutlineInfoCircle />
+                        </span>
+                        <Tooltip
+                          id={`tooltip-${subSection.title}`}
+                          className="tooltip-wrap"
+                        />
+                      </>
+                    )}
+                  </div>
+                </div>
+                <div>
+                  <p className="flex-1 text-right">
+                    {!!chainSyncStatus ? (
+                      <strong>{subSection.value}</strong>
+                    ) : (
+                      <span className="loading loading-spinner text-primary" />
+                    )}
+                  </p>
+                </div>
+              </div>
+              {/* Add divider between sections */}
+              {subIndex !== section.length - 1 && (
+                <div className="divider mx-0 my-2 md:divider-horizontal" />
+              )}
+            </Fragment>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

src/app/components/Transaction/Transaction.tsx

@@ -8,9 +8,13 @@ import { LoadingSmall } from "../Loading/Loading";
 
 interface TransactionProps {
   transaction: TransactionInfo | undefined;
+  isLoading: boolean;
 }
 
-export const Transaction: React.FC<TransactionProps> = ({ transaction }) => {
+export const Transaction: React.FC<TransactionProps> = ({
+  transaction,
+  isLoading,
+}) => {
   const status = (tx: TransactionInfo) => {
     switch (tx.status) {
       case "pending":
@@ -28,6 +32,16 @@ export const Transaction: React.FC<TransactionProps> = ({ transaction }) => {
     }
   };
 
+  if (!transaction && !isLoading) {
+    return (
+      <div className="card flex flex-col gap-6 lg:gap-4 bg-base-300 p-6 shadow-sm items-start overflow-hidden">
+        <p className="dark:text-neutral-content text-sm">
+          Transaction not found.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="card flex flex-col gap-6 lg:gap-4 bg-base-300 p-6 shadow-sm items-start overflow-hidden">
       <h3 className="font-bold">Transaction status</h3>

src/app/globals.css

@@ -5,7 +5,7 @@
 @import url("styles/terms-privacy.css");
 
 :root {
-  --primary: #ff7c2a;
+  --primary: #84d019;
   --secondary: "#0DB7BF";
 }
 
@@ -68,7 +68,7 @@ input[type="number"] {
 /* tabs selection */
 .tab.tab-active:not(.tab-disabled):not([disabled]),
 .tab:is(input:checked) {
-  border-color: #ff7c2a;
+  border-color: #84d019;
 }
 
 .divider:after,