IPFS hosting adaptation

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;

src/app/records/[id]/page.tsx → 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>
   );
 }

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}`)}
     />
   );
 

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">

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",
 }