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

…e-explorer-frontend into development

.dockerignore

@@ -0,0 +1,30 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

Dockerfile

@@ -12,4 +12,9 @@ COPY . .
 RUN npm install -g pnpm && export NEXT_PUBLIC_IS_BASE=${NEXT_PUBLIC_IS_BASE} && pnpm build
 
 FROM nginx
-COPY --from=builder /app/out /usr/share/nginx/html
+COPY --from=builder /app/out /usr/share/nginx/html
+RUN apt-get update && apt-get install -y jq && apt-get clean
+COPY ./nginx.conf.example /etc/nginx/nginx.conf
+COPY ./start.sh /start.sh
+RUN chmod +x /start.sh
+CMD ["/bin/bash", "/start.sh"]

nginx.conf.example

@@ -16,42 +16,32 @@ http {
     server {
         listen       80;
         location / {
-            root   html;
+            root   /usr/share/nginx/html;
             index  index.html index.htm;
             try_files  $uri $uri/ /index.html;
         }
 
-        location ～ /index/ {
-            proxy_pass http://Sepolia/;
+        location ^~ /index/ {
+            proxy_pass http://meiliSearch:7700/;
             proxy_set_header Host $host;
             proxy_set_header X-Forward-For $remote_addr;
             proxy_set_header X-Forward-Proto $scheme;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
-            proxy_set_header Authorization "Bearer $TOKEN";
+            proxy_set_header Authorization "Bearer TOKEN";
         }
-        location ～ /indexMain/ {
-            proxy_pass http://main/;
+        location ^~ /api/ {
+            proxy_pass http://node1:8080/;
             proxy_set_header Host $host;
             proxy_set_header X-Forward-For $remote_addr;
             proxy_set_header X-Forward-Proto $scheme;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
-            proxy_set_header Authorization "Bearer $TOKEN";
         }
-        location ～ /api/ {
-            proxy_pass http://Sepolia/;
-            proxy_set_header Host $host;
-            proxy_set_header X-Forward-For $remote_addr;
-            proxy_set_header X-Forward-Proto $scheme;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-        }
-        location ～ /apiMain/ {
-            proxy_pass http://main/;
+        location ^~ /docs/ {
+            proxy_pass http://node1:8080/;
             proxy_set_header Host $host;
             proxy_set_header X-Forward-For $remote_addr;
             proxy_set_header X-Forward-Proto $scheme;

src/components/Cards/SurfaceCards/ClaimCard.tsx

@@ -1,20 +1,22 @@
 import { ClaimData } from "@/types";
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { SurfaceCardBase } from "./SurfaceCardBase";
 import { Link } from "@/components/Link";
 import { Skeleton } from "@/components/Skeleton";
 import { CardField } from "../Card";
 import { shortenAddress } from "@/utils";
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 
 type ClaimCardProps = {
   claimData: ClaimData;
 };
 
-const ClaimCard: FC<Partial<ClaimCardProps>> = ({ claimData = {} }) => {
+const ClaimCard: FC<Partial<ClaimCardProps>> = ({
+  claimData = {} as ClaimData,
+}) => {
   const { claim, claimant, output_block, event_id } = claimData;
   const { explorer_l1: EXPLORER_L1, explorer_l2: EXPLORER_L2 } =
-    useNetworkConfig();
+    useContext(NetworkConfigContext);
   return (
     <SurfaceCardBase>
       <div className="flex justify-between gap-2 text-sm">

src/components/Cards/SurfaceCards/CreditCard.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { useContext, type FC } from "react";
 
 import { Skeleton } from "@/components/Skeleton";
 import { Link } from "../../Link";
@@ -7,7 +7,7 @@ import { SurfaceCardBase } from "./SurfaceCardBase";
 import { Credit } from "@/types";
 import { shortenAddress } from "@/utils";
 import { EtherUnitDisplay } from "@/components/Displays/EtherUnitDisplay";
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 
 type CreditCardProps = {
   credit: Credit;
@@ -18,7 +18,7 @@ const CreditCard: FC<Partial<CreditCardProps>> = function ({
   credit: { address, amount } = {},
   index,
 }) {
-  const { explorer_l1: EXPLORER_L1 } = useNetworkConfig();
+  const { explorer_l1: EXPLORER_L1 } = useContext(NetworkConfigContext);
   return (
     <SurfaceCardBase>
       <div className="flex  justify-between gap-2 text-sm">

src/components/Cards/SurfaceCards/EventCard.tsx

@@ -1,12 +1,12 @@
-import type { FC } from "react";
+import { useContext, type FC } from "react";
 
 import dayjs from "@/utils/dayjs";
 import { Skeleton } from "@/components/Skeleton";
 import { Link } from "../../Link";
 import { SurfaceCardBase } from "./SurfaceCardBase";
 import { LatestEvents } from "@/types";
 import { shortenAddress } from "@/utils";
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 
 type EventCardProps = {
   events: LatestEvents;
@@ -22,7 +22,7 @@ const EventCard: FC<Partial<EventCardProps>> = function ({
     tx_hash,
   } = {},
 }) {
-  const { explorer_l1: EXPLORER_L1 } = useNetworkConfig();
+  const { explorer_l1: EXPLORER_L1 } = useContext(NetworkConfigContext);
 
   return (
     <SurfaceCardBase>

src/components/Cards/SurfaceCards/GameCard.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { useContext, type FC } from "react";
 
 import dayjs from "@/utils/dayjs";
 import { Skeleton } from "@/components/Skeleton";
@@ -10,7 +10,7 @@ import { shortenAddress } from "@/utils";
 import shield from "@/icons/shield.png";
 import sword from "@/icons/sword.png";
 import Image from "next/image";
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 
 type GameCardProps = {
   game: Game;
@@ -27,7 +27,7 @@ const GameCard: FC<Partial<GameCardProps>> = function ({
   } = {},
 }) {
   const { explorer_l1: EXPLORER_L1, explorer_l2: EXPLORER_L2 } =
-    useNetworkConfig();
+    useContext(NetworkConfigContext);
   return (
     <SurfaceCardBase>
       <div className="flex justify-between gap-2 text-sm">

src/components/DisputeGameLogo.tsx

@@ -1,12 +1,18 @@
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 import Link from "next/link";
+import { useContext } from "react";
 
-
-const DisputeGameLogo: React.FC<{ className?: string }> = ({ }) => {
-  const { network } = useNetworkConfig()
-  return <Link href="/">
-    <img src={network === 'base-sepolia' ? '/logo_base.svg' : '/logo.svg'} className="w-48" alt="logo" />
-  </Link>
+const DisputeGameLogo: React.FC<{ className?: string }> = ({}) => {
+  const { network } = useContext(NetworkConfigContext);
+  return (
+    <Link href="/">
+      <img
+        src={network === "base-sepolia" ? "/logo_base.svg" : "/logo.svg"}
+        className="w-48"
+        alt="logo"
+      />
+    </Link>
+  );
 };
 
 export default DisputeGameLogo;

src/components/ExplorerDetails.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 
 import "react-loading-skeleton/dist/skeleton.css";
 import Skeleton from "react-loading-skeleton";
 
 import { capitalize } from "@/utils";
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 
 type ExplorerDetailsItemProps = {
   name: string;
@@ -31,7 +31,7 @@ function ExplorerDetailsItem({
 }
 
 export function ExplorerDetails() {
-  const { network } = useNetworkConfig();
+  const { network } = useContext(NetworkConfigContext);
   const explorerDetailsItems: ExplorerDetailsItemProps[] = useMemo(() => {
     return [{ name: "Network", value: capitalize(network!) }];
   }, [network]);

src/components/Logo.tsx

@@ -1,12 +1,16 @@
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
-import { useTheme } from "next-themes";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 import Link from "next/link";
+import { useContext } from "react";
 
 export const Logo: React.FC<{ className?: string }> = ({ className = "" }) => {
-  const { network } = useNetworkConfig()
+  const { network } = useContext(NetworkConfigContext);
   return (
     <Link href="/">
-      <img src={network === 'base-sepolia' ? '/logo_base.svg' : '/logo.svg'} className="w-40" alt="logo" />
+      <img
+        src={network === "base-sepolia" ? "/logo_base.svg" : "/logo.svg"}
+        className="w-40"
+        alt="logo"
+      />
     </Link>
   );
-}
+};

src/components/NetworkConfigContext.tsx

@@ -0,0 +1,42 @@
+import { NetworkConfig, networkConfigs, Network } from "@/utils/env";
+import { createContext, ReactNode, useEffect, useState } from "react";
+
+const defaultNetwork = networkConfigs["sepolia"];
+export const NetworkConfigContext =
+  createContext<NetworkConfig>(defaultNetwork);
+
+export default function NetworkConfigProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [config, setConfig] = useState<NetworkConfig>(defaultNetwork);
+  useEffect(() => {
+    const getChain = async () => {
+      try {
+        const res = await fetch("/api/disputegames/chainname");
+        const data = await res.json();
+        let network = data?.blockchain as string;
+        if (network) {
+          if (network.startsWith("eth-")) {
+            network = network.substring(4);
+          }
+          const fetchedConfig = networkConfigs[network as Network];
+          if (fetchedConfig) {
+            setConfig(fetchedConfig); // 更新上下文状态
+          }
+        }
+      } catch (error) {
+        console.error("Failed to fetch network:", error);
+      }
+    };
+
+    getChain();
+  }, []);
+
+  return (
+    <NetworkConfigContext.Provider value={config}>
+      {children}
+    </NetworkConfigContext.Provider>
+  );
+}

src/hooks/useAutoSwitchNetwork.ts

@@ -1,20 +1,19 @@
-import { useAccount, useSwitchChain } from "wagmi"
-import { useNetworkConfig } from "./useNetworkConfig"
-import { useEffect } from "react"
-import { mainnet, sepolia } from "viem/chains"
-
+import { useAccount, useSwitchChain } from "wagmi";
+import { useContext, useEffect } from "react";
+import { mainnet, sepolia } from "viem/chains";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 
 const useAutoSwitchNetwork = () => {
-  const { network } = useNetworkConfig()
-  const { switchChain } = useSwitchChain()
-  const { isConnected, chain } = useAccount()
+  const { network } = useContext(NetworkConfigContext);
+  const { switchChain } = useSwitchChain();
+  const { isConnected, chain } = useAccount();
   useEffect(() => {
     if (!isConnected || !chain) return;
-    const targetChainId = network === 'mainnet' ? mainnet.id : sepolia.id;
+    const targetChainId = network === "mainnet" ? mainnet.id : sepolia.id;
     if (chain.id !== targetChainId) {
-      switchChain({ chainId: targetChainId })
+      switchChain({ chainId: targetChainId });
     }
-  }, [isConnected, network, chain])
-}
+  }, [isConnected, network, chain]);
+};
 
-export default useAutoSwitchNetwork
+export default useAutoSwitchNetwork;