Merge branch 'development' of https://github.com/optimism-java/disput…

…e-explorer-frontend into development

.github/workflows/docker-build.yml

@@ -0,0 +1,41 @@
+name: Build Docker images
+
+on:
+  push:
+    branches:
+      - "development"
+  pull_request:
+    branches:
+      - "development"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Create .env file
+        run: |
+          echo "NEXT_PUBLIC_API_KEY=${{ secrets.NEXT_PUBLIC_API_KEY }}" > .env
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -0,0 +1,25 @@
+FROM node:20.16.0-alpine AS deps
+RUN apk update && apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN npm install -g pnpm && pnpm install
+
+FROM node:20.16.0-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm install -g pnpm && pnpm build && pnpm install --production 
+
+FROM node:20.16.0-alpine
+WORKDIR /app
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_ENV production
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+EXPOSE 3000
+ENV PORT 3000
+
+CMD ["node_modules/.bin/next", "start"]

src/components/Cards/Card.tsx

@@ -89,7 +89,7 @@ export const CardHeader: FC<CardHeaderProps> = function ({
 export type CardFieldProps = {
   name: ReactNode;
   value: ReactNode;
-  originValue: string;
+  originValue?: string;
 };
 
 export const CardField: FC<CardFieldProps> = function ({

src/components/Cards/SurfaceCards/GameCard.tsx

@@ -10,7 +10,6 @@ import { shortenAddress } from "@/utils";
 import shield from "@/icons/shield.png";
 import sword from "@/icons/sword.png";
 import Image from "next/image";
-import { useRouter } from "next/router";
 
 type GameCardProps = {
   game: Game;
@@ -19,7 +18,6 @@ type GameCardProps = {
 const GameCard: FC<Partial<GameCardProps>> = function ({
   game: { l2_block_number: number, block_time, game_contract, status } = {},
 }) {
-  const nav = useRouter();
 
   return (
     <SurfaceCardBase>