fix:

- 修改 Script 接口中 args 的类型从 string[] 改为 string
- 修改 shutdownChannel 函数中的 close_script.args 参数格式
- 确保所有参数都符合 API 期望的十六进制字符串格式

Author: sfsf332

packages/demo/src/app/fiber/channel/page.tsx

@@ -1,11 +1,12 @@
 "use client";
-"use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { Button } from "@/src/components/Button";
 import { TextInput } from "@/src/components/Input";
 import { ButtonsPanel } from "@/src/components/ButtonsPanel";
 import { useFiber } from "../context/FiberContext";
+import { hexToDecimal, decimalToHex } from '@/src/utils/hex';
+import { shannonToCKB } from "../utils/numbers"
 
 interface ChannelState {
   fundingAmount: string;
@@ -26,33 +27,41 @@ interface OpenChannelForm {
 
 export default function Channel() {
   const { fiber } = useFiber();
-  const [endpoint, setEndpoint] = useState("");
   const [nodeInfo, setNodeInfo] = useState<any>(null);
   const [channels, setChannels] = useState<any[]>([]);
   const [peers, setPeers] = useState<any[]>([]);
   const [peerAddress, setPeerAddress] = useState("");
-  const [channelStates, setChannelStates] = useState<
-    Record<string, ChannelState>
-  >({});
+  const [channelStates, setChannelStates] = useState<Record<string, ChannelState>>({});
   const [isLoading, setIsLoading] = useState(false);
+  const channelStatesRef = useRef(channelStates);
+  const initialized = useRef(false);
   const [openChannelForm, setOpenChannelForm] = useState<OpenChannelForm>({
     peerAddress:
       "/ip4/18.162.235.225/tcp/8119/p2p/QmXen3eUHhywmutEzydCsW4hXBoeVmdET2FJvMX69XJ1Eo",
     fundingAmount: "50000000000",
     isPublic: true,
   });
 
+  // 更新 ref 当 channelStates 改变时
+  useEffect(() => {
+    channelStatesRef.current = channelStates;
+  }, [channelStates]);
+
   const listChannels = useCallback(async () => {
     if (!fiber) return;
     setIsLoading(true);
     try {
       const channelList = await fiber.listChannels();
-      console.log(channelList);
       setChannels(channelList);
-      // 初始化每个通道的状态
+      
+      // 只在需要时更新 channelStates
       const newChannelStates: Record<string, ChannelState> = {};
+      let hasChanges = false;
+      
       channelList.forEach((channel: any) => {
-        if (!channelStates[channel.channel_id]) {
+        const existingState = channelStatesRef.current[channel.channel_id];
+        if (!existingState) {
+          hasChanges = true;
           newChannelStates[channel.channel_id] = {
             fundingAmount: channel.funding_amount || "0xba43b7400",
             feeRate: channel.fee_rate || "0x3FC",
@@ -64,17 +73,19 @@ export default function Channel() {
             forceClose: false,
           };
         } else {
-          newChannelStates[channel.channel_id] =
-            channelStates[channel.channel_id];
+          newChannelStates[channel.channel_id] = existingState;
         }
       });
-      setChannelStates(newChannelStates);
+      
+      if (hasChanges) {
+        setChannelStates(newChannelStates);
+      }
     } catch (error) {
       console.error("Failed to list channels:", error);
     } finally {
       setIsLoading(false);
     }
-  }, [fiber, channelStates]);
+  }, [fiber]); // 只依赖 fiber
 
   const updateChannel = async (channelId: string) => {
     if (!fiber || !channelId) return;
@@ -138,57 +149,42 @@ export default function Channel() {
     const state = channelStates[channelId];
     if (!state) return;
     try {
-      if (state.forceClose) {
-        await fiber.channel.shutdownChannel({
-          channel_id: channelId,
-          close_script: {
-            code_hash:
-              "0x9bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce8",
-            hash_type: "type",
-            args: ["0xcc015401df73a3287d8b2b19f0cc23572ac8b14d"],
-          },
-          force: true,
-          fee_rate: BigInt(state.feeRate),
-        });
-      } else {
-        await fiber.channel.shutdownChannel({
-          channel_id: channelId,
-          close_script: {
-            code_hash:
-              "0x9bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce8",
-            hash_type: "type",
-            args: ["0xcc015401df73a3287d8b2b19f0cc23572ac8b14d"],
-          },
-          force: false,
-          fee_rate: BigInt(state.feeRate),
-        });
+      // 确保channelId是有效的十六进制字符串
+      if (!channelId.startsWith('0x')) {
+        channelId = '0x' + channelId;
       }
+
+      const params = {
+        channel_id: channelId,
+        close_script: {
+          code_hash:
+            "0x9bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce8",
+          hash_type: "type",
+          args: "0xcc015401df73a3287d8b2b19f0cc23572ac8b14d"
+        },
+        force: state.forceClose,
+        fee_rate: state.feeRate,
+      };
+
+      console.log("Shutdown channel params:", JSON.stringify(params, null, 2));
+      console.log("Fee rate type:", typeof state.feeRate);
+      console.log("Fee rate value:", state.feeRate);
+
+      await fiber.channel.shutdownChannel(params);
       console.log("Channel shutdown initiated successfully");
       // Refresh channel list
       await listChannels();
     } catch (error) {
       console.error("Failed to shutdown channel:", error);
-    }
-  };
-  const connectPeer = async () => {
-    if (!fiber) return;
-    try {
-      await fiber.connectPeer(openChannelForm.peerAddress);
-      console.log("Peer connected successfully");
-      // 连接成功后刷新 peers 列表
-      const peerList = await fiber.listPeers();
-      console.log("Current peers:", peerList);
-      setPeers(peerList);
-    } catch (error) {
-      console.error("Failed to connect peer:", error);
       if (error instanceof Error) {
-        alert(`连接 peer 失败: ${error.message}`);
+        alert(`关闭通道失败: ${error.message}`);
       } else {
-        alert("连接 peer 失败，请检查网络连接");
+        alert("关闭通道失败，请检查通道状态");
       }
     }
   };
 
+
   const handleOpenChannel = async () => {
     if (!fiber) return;
     try {
@@ -200,7 +196,7 @@ export default function Channel() {
       const peerId = openChannelForm.peerAddress.split("/p2p/")[1];
       await fiber.channel.openChannel({
         peer_id: peerId,
-        funding_amount: BigInt(openChannelForm.fundingAmount),
+        funding_amount: openChannelForm.fundingAmount,
         public: openChannelForm.isPublic,
       });
       console.log("Channel opened successfully");
@@ -217,7 +213,8 @@ export default function Channel() {
   };
 
   useEffect(() => {
-    if (fiber) {
+    if (fiber && !initialized.current) {
+      initialized.current = true;
       listChannels();
     }
   }, [fiber, listChannels]);
@@ -246,7 +243,6 @@ export default function Channel() {
             ]}
             placeholder="输入 peer 地址"
           />
-          <Button onClick={connectPeer}>连接 peer</Button>
           <TextInput
             label="Funding Amount (CKB)"
             state={[
@@ -301,110 +297,112 @@ export default function Channel() {
                   </p>
                   <p>
                     <span className="font-semibold">Local Balance:</span>{" "}
-                    {channel.local_balance}
+                    {hexToDecimal(channel.local_balance).toString()}
                   </p>
                   <p>
                     <span className="font-semibold">Remote Balance:</span>{" "}
-                    {channel.remote_balance}
+                    {hexToDecimal(channel.remote_balance).toString()}
                   </p>
                 </div>
                 <div>
                   <div className="mt-1">
                     <TextInput
-                      label="Funding Amount"
+                      label="Funding Amount (Decimal)"
                       state={[
-                        channelStates[channel.channel_id]?.fundingAmount ||
-                          "0xba43b7400",
+                        hexToDecimal(channelStates[channel.channel_id]?.fundingAmount || "0xba43b7400").toString(),
                         (value) => {
                           const newState = {
                             ...channelStates[channel.channel_id],
-                            fundingAmount: value,
+                            fundingAmount: decimalToHex(parseInt(value) || 0),
                           };
                           setChannelStates((prev) => ({
                             ...prev,
                             [channel.channel_id]: newState,
                           }));
                         },
                       ]}
-                      placeholder="0xba43b7400"
+                      placeholder="50000000000"
+                      type="number"
                     />
                   </div>
                   <div className="mt-1">
                     <TextInput
-                      label="Fee Rate"
+                      label="Fee Rate (Decimal)"
                       state={[
-                        channelStates[channel.channel_id]?.feeRate || "0x3FC",
+                        hexToDecimal(channelStates[channel.channel_id]?.feeRate || "0x3FC").toString(),
                         (value) => {
                           const newState = {
                             ...channelStates[channel.channel_id],
-                            feeRate: value,
+                            feeRate: decimalToHex(parseInt(value) || 0),
                           };
                           setChannelStates((prev) => ({
                             ...prev,
                             [channel.channel_id]: newState,
                           }));
                         },
                       ]}
-                      placeholder="0x3FC"
+                      placeholder="1020"
+                      type="number"
                     />
                   </div>
                   <div className="mt-1">
                     <TextInput
-                      label="TLC Expiry Delta"
+                      label="TLC Expiry Delta (Decimal)"
                       state={[
-                        channelStates[channel.channel_id]?.tlcExpiryDelta ||
-                          "0x100",
+                        hexToDecimal(channelStates[channel.channel_id]?.tlcExpiryDelta || "0x100").toString(),
                         (value) => {
                           const newState = {
                             ...channelStates[channel.channel_id],
-                            tlcExpiryDelta: value,
+                            tlcExpiryDelta: decimalToHex(parseInt(value) || 0),
                           };
                           setChannelStates((prev) => ({
                             ...prev,
                             [channel.channel_id]: newState,
                           }));
                         },
                       ]}
-                      placeholder="0x100"
+                      placeholder="256"
+                      type="number"
                     />
                   </div>
                   <div className="mt-1">
                     <TextInput
-                      label="TLC Minimum Value"
+                      label="TLC Minimum Value (Decimal)"
                       state={[
-                        channelStates[channel.channel_id]?.tlcMinValue || "0x0",
+                        hexToDecimal(channelStates[channel.channel_id]?.tlcMinValue || "0x0").toString(),
                         (value) => {
                           const newState = {
                             ...channelStates[channel.channel_id],
-                            tlcMinValue: value,
+                            tlcMinValue: decimalToHex(parseInt(value) || 0),
                           };
                           setChannelStates((prev) => ({
                             ...prev,
                             [channel.channel_id]: newState,
                           }));
                         },
                       ]}
-                      placeholder="0x0"
+                      placeholder="0"
+                      type="number"
                     />
                   </div>
                   <div className="mt-1">
                     <TextInput
-                      label="TLC Fee Proportional Millionths"
+                      label="TLC Fee Proportional Millionths (Decimal)"
                       state={[
-                        channelStates[channel.channel_id]
-                          ?.tlcFeeProportionalMillionths || "0x0",
+                        hexToDecimal(channelStates[channel.channel_id]?.tlcFeeProportionalMillionths || "0x0").toString(),
                         (value) => {
                           const newState = {
                             ...channelStates[channel.channel_id],
-                            tlcFeeProportionalMillionths: value,
+                            tlcFeeProportionalMillionths: decimalToHex(parseInt(value) || 0),
                           };
                           setChannelStates((prev) => ({
                             ...prev,
                             [channel.channel_id]: newState,
                           }));
                         },
                       ]}
-                      placeholder="0x0"
+                      placeholder="0"
+                      type="number"
                     />
                   </div>
                   <div className="mt-1 flex items-center">

packages/demo/src/app/fiber/context/FiberContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, ReactNode, useState } from "react";
+import { createContext, useContext, ReactNode, useState, useEffect } from "react";
 import { FiberSDK } from "@ckb-ccc/fiber";
 
 interface FiberContextType {
@@ -11,7 +11,36 @@ interface FiberContextType {
 const FiberContext = createContext<FiberContextType | null>(null);
 
 export function FiberProvider({ children }: { children: ReactNode }) {
-  const [fiber, setFiber] = useState<FiberSDK | null>(null);
+  const [fiber, setFiber] = useState<FiberSDK | null>(() => {
+    // 从 localStorage 中获取存储的 fiber 配置
+    if (typeof window !== 'undefined') {
+      const savedConfig = localStorage.getItem('fiberConfig');
+      if (savedConfig) {
+        try {
+          const config = JSON.parse(savedConfig);
+          return new FiberSDK(config);
+        } catch (error) {
+          console.error('Failed to restore fiber from localStorage:', error);
+          return null;
+        }
+      }
+    }
+    return null;
+  });
+  
+  // 当 fiber 更新时，保存到 localStorage
+  useEffect(() => {
+    if (fiber) {
+      // 保存配置到 localStorage
+      const config = {
+        endpoint: '/api/fiber', // 使用默认的 endpoint
+        timeout: 5000 // 使用默认的 timeout
+      };
+      localStorage.setItem('fiberConfig', JSON.stringify(config));
+    } else {
+      localStorage.removeItem('fiberConfig');
+    }
+  }, [fiber]);
 
   return (
     <FiberContext.Provider value={{ fiber, setFiber }}>