IPFS hosting adaptation

.fleek.json

@@ -0,0 +1,14 @@
+{
+    "site": {
+      "id": "0991882f-3be7-482d-9208-89899a3632e7",
+      "team": "fewensa-team",
+      "platform": "ipfs",
+      "source": "ipfs",
+      "name": "divine-butterfly-5417"
+    },
+    "build": {
+      "baseDir": "",
+      "publicDir": "out",
+      "rootDir": ""
+    }
+  }

.github/workflows/deploy-dev.yml

@@ -2,6 +2,8 @@ name: Deploy development
 
 on:
   workflow_dispatch:
+  pull_request:
+    branches: [main]
 
 jobs:
   deploy-package:
@@ -10,35 +12,52 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
         with:
-          repository: darwinia-network/devops
-          path: .github
+          node-version: 20
 
-      - uses: ./.github/actions/smart-vercel
-        name: Deploy helix
-        with:
-          vercel_token: ${{ secrets.VERCEL_TOKEN }}
-          vercel_group: itering
-          preview_output: true
-          alias_domain: "helix-dev-main"
-          project_name: "helix-apps"
-          script_run: false
-          dist_path: .
-          enable_notify_slack: true
-          slack_channel: helix-ui
-          slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
-
-      - uses: ./.github/actions/smart-vercel
-        name: Deploy helix (test)
+      - name: Build
+        run: |
+          npm install
+          npm run build
+
+      - name: Upload ipsf
+        uses: aquiladev/ipfs-action@master
         with:
-          vercel_token: ${{ secrets.VERCEL_TOKEN }}
-          vercel_group: itering
-          preview_output: true
-          alias_domain: "helix-dev-test"
-          project_name: "helix-apps-test"
-          script_run: false
-          dist_path: .
-          enable_notify_slack: true
-          slack_channel: helix-ui
-          slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
+          path: ./out
+          service: pinata
+          pinataKey: ${{ secrets.PINATA_KEY }}
+          pinataSecret: ${{ secrets.PINATA_SECRET }}
+
+      # - uses: actions/checkout@v3
+      #   with:
+      #     repository: darwinia-network/devops
+      #     path: .github
+
+      # - uses: ./.github/actions/smart-vercel
+      #   name: Deploy helix
+      #   with:
+      #     vercel_token: ${{ secrets.VERCEL_TOKEN }}
+      #     vercel_group: itering
+      #     preview_output: true
+      #     alias_domain: "helix-dev-main"
+      #     project_name: "helix-apps"
+      #     script_run: false
+      #     dist_path: .
+      #     enable_notify_slack: true
+      #     slack_channel: helix-ui
+      #     slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
+
+      # - uses: ./.github/actions/smart-vercel
+      #   name: Deploy helix (test)
+      #   with:
+      #     vercel_token: ${{ secrets.VERCEL_TOKEN }}
+      #     vercel_group: itering
+      #     preview_output: true
+      #     alias_domain: "helix-dev-test"
+      #     project_name: "helix-apps-test"
+      #     script_run: false
+      #     dist_path: .
+      #     enable_notify_slack: true
+      #     slack_channel: helix-ui
+      #     slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}

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