From a090be93e53c4a3ad10bd77ecd2cad1913ea83fd Mon Sep 17 00:00:00 2001
From: JayJay1024 <lygm1062@gmail.com>
Date: Tue, 19 Dec 2023 16:21:18 +0800
Subject: [PATCH] IPFS hosting adaptation

---
 next.config.js                               |  4 ++++
 src/app/{records/[id] => record}/loading.tsx |  0
 src/app/{records/[id] => record}/page.tsx    | 10 ++--------
 src/components/history-records.tsx           |  5 ++---
 src/components/record-detail.tsx             | 18 +++++++++++-------
 src/types/url.ts                             |  1 +
 6 files changed, 20 insertions(+), 18 deletions(-)
 rename src/app/{records/[id] => record}/loading.tsx (100%)
 rename src/app/{records/[id] => record}/page.tsx (67%)

diff --git a/next.config.js b/next.config.js
index f46922245..4c27dbd9d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: "export",
+  images: {
+    unoptimized: true,
+  },
   webpack: (config) => {
     config.externals.push("lokijs", "encoding", "pino-pretty");
     return config;
diff --git a/src/app/records/[id]/loading.tsx b/src/app/record/loading.tsx
similarity index 100%
rename from src/app/records/[id]/loading.tsx
rename to src/app/record/loading.tsx
diff --git a/src/app/records/[id]/page.tsx b/src/app/record/page.tsx
similarity index 67%
rename from src/app/records/[id]/page.tsx
rename to src/app/record/page.tsx
index b9681a134..944b56076 100644
--- a/src/app/records/[id]/page.tsx
+++ b/src/app/record/page.tsx
@@ -7,16 +7,10 @@ export const metadata: Metadata = {
   description: "View Helix Bridge transfer details",
 };
 
-interface Props {
-  params: {
-    id: string;
-  };
-}
-
-export default function RecordPage({ params }: Props) {
+export default function RecordPage() {
   return (
     <PageWrap>
-      <RecordDetail id={params.id} />
+      <RecordDetail />
     </PageWrap>
   );
 }
diff --git a/src/components/history-records.tsx b/src/components/history-records.tsx
index c856080c8..88128e13e 100644
--- a/src/components/history-records.tsx
+++ b/src/components/history-records.tsx
@@ -5,7 +5,7 @@ import { useApp } from "@/hooks";
 import { HistoryRecordsReqParams, HistoryRecordsResData, RecordResult, UrlSearchParamKey } from "@/types";
 import Tabs, { TabsProps } from "@/ui/tabs";
 import { NetworkStatus, useQuery } from "@apollo/client";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useDeferredValue, useEffect, useState } from "react";
 import RecordsTable from "./records-table";
 import Search from "@/ui/search";
@@ -24,7 +24,6 @@ export default function HistoryRecords() {
   const deferredSearchValue = useDeferredValue(recordsSearch);
 
   const searchParams = useSearchParams();
-  const pathName = usePathname();
   const router = useRouter();
 
   const [activeKey, setActiveKey] = useState<TabsProps<TabKey>["activeKey"]>(AllResult.All);
@@ -86,7 +85,7 @@ export default function HistoryRecords() {
         params.set(UrlSearchParamKey.PAGE, (page + 1).toString());
         router.push(`?${params.toString()}`);
       }}
-      onRowClick={(_, { id }) => router.push(`${pathName}/${id}`)}
+      onRowClick={(_, { id }) => router.push(`record?${UrlSearchParamKey.ID}=${id}`)}
     />
   );
 
diff --git a/src/components/record-detail.tsx b/src/components/record-detail.tsx
index 9a9c27f34..494a79c95 100644
--- a/src/components/record-detail.tsx
+++ b/src/components/record-detail.tsx
@@ -2,12 +2,12 @@
 
 import { BaseBridge } from "@/bridges";
 import { GQL_HISTORY_RECORD_BY_ID } from "@/config";
-import { HistoryRecordReqParams, HistoryRecordResData } from "@/types";
+import { HistoryRecordReqParams, HistoryRecordResData, UrlSearchParamKey } from "@/types";
 import ComponentLoading from "@/ui/component-loading";
 import CountdownRefresh from "@/ui/countdown-refresh";
 import { bridgeFactory, getChainConfig } from "@/utils";
 import { useQuery } from "@apollo/client";
-import { PropsWithChildren, useMemo } from "react";
+import { PropsWithChildren, useEffect, useMemo, useState } from "react";
 import TransferRoute from "./transfer-route";
 import TransactionStatus from "./transaction-status";
 import { TransactionHash } from "./transaction-hash";
@@ -19,18 +19,17 @@ import TransactionValue from "./transaction-value";
 import TransactionFee from "./transaction-fee";
 import { RecordItemTitle } from "@/ui/record-item-title";
 
-interface Props {
-  id: string;
-}
+export default function RecordDetail() {
+  const [id, setId] = useState("");
 
-export default function RecordDetail(props: Props) {
   const {
     loading,
     data: record,
     refetch,
   } = useQuery<HistoryRecordResData, HistoryRecordReqParams>(GQL_HISTORY_RECORD_BY_ID, {
-    variables: { id: props.id },
+    variables: { id },
     notifyOnNetworkStatusChange: true,
+    skip: !id.length,
   });
 
   const bridgeInstance = useMemo<BaseBridge | undefined>(() => {
@@ -46,6 +45,11 @@ export default function RecordDetail(props: Props) {
     return undefined;
   }, [record?.historyRecordById]);
 
+  useEffect(() => {
+    const id = new URLSearchParams(window.location.search).get(UrlSearchParamKey.ID);
+    setId((prev) => id ?? prev);
+  }, []);
+
   return (
     <>
       <div className="flex items-center justify-between gap-5">
diff --git a/src/types/url.ts b/src/types/url.ts
index c25fb919e..bb4b59da1 100644
--- a/src/types/url.ts
+++ b/src/types/url.ts
@@ -7,4 +7,5 @@ export enum UrlSearchParamKey {
   TARGET_CHAIN = "target_chain",
   SOURCE_TOKEN = "source_token",
   TARGET_TOKEN = "target_token",
+  ID = "id",
 }