feat(playground): support Nervos DAO tx

ckb-devrel · Feb 28, 2025 · 4b8fee4 · 4b8fee4
1 parent 6db12e7
commit 4b8fee4
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 10 deletions.
diff --git a/packages/playground/src/app/components/Cell.tsx b/packages/playground/src/app/components/Cell.tsx
@@ -1,9 +1,16 @@
 import { ccc } from "@ckb-ccc/connector-react";
 import { formatString, getScriptColor, useGetExplorerLink } from "../utils";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { RandomWalk } from "./RandomWalk";
 
-function Capacity({ capacity }: { capacity?: ccc.NumLike }) {
+function Capacity({
+  capacity,
+  profit,
+}: {
+  capacity?: ccc.NumLike;
+  profit: ccc.NumLike;
+}) {
+  const profitNum = ccc.numFrom(profit);
   const [l, r] = useMemo(() => {
     if (capacity === undefined) {
       return ["?"];
@@ -15,21 +22,32 @@ function Capacity({ capacity }: { capacity?: ccc.NumLike }) {
     return (
       <>
         <span className="break-all text-4xl font-bold">{l}</span>
-        <span className="break-all text-sm">CKB</span>
+        <span className="break-all text-sm">
+          {profitNum === ccc.Zero
+            ? ""
+            : `+ ${ccc.fixedPointToString(ccc.numFrom(profit))} `}
+          CKB
+        </span>
       </>
     );
   }
 
   return (
     <>
       <span className="break-all text-4xl font-bold">{l}</span>
-      <span className="break-all text-sm">.{r} CKB</span>
+      <span className="break-all text-sm">.{r}</span>
+      <span className="break-all text-sm">
+        {profitNum === ccc.Zero
+          ? ""
+          : `+ ${ccc.fixedPointToString(ccc.numFrom(profit))} `}
+        CKB
+      </span>
     </>
   );
 }
 
 export function Cell({
-  cell: { cellOutput, previousOutput, outputData },
+  cell,
 }: {
   cell: {
     cellOutput?: ccc.CellOutput;
@@ -38,6 +56,39 @@ export function Cell({
   };
 }) {
   const { explorerTransaction } = useGetExplorerLink();
+  const { client } = ccc.useCcc();
+
+  const { previousOutput } = cell;
+  const [cellOutput, setCellOutput] = useState(cell.cellOutput);
+  const [outputData, setOutputData] = useState(cell.outputData);
+  const [daoProfit, setDaoProfit] = useState(ccc.Zero);
+
+  useEffect(() => {
+    if (!previousOutput) {
+      return;
+    }
+
+    const input = ccc.CellInput.from({
+      ...cell,
+      previousOutput, // For type checking
+    });
+
+    (async () => {
+      try {
+        await input.completeExtraInfos(client);
+      } catch (err) {
+        return;
+      }
+
+      if (!input.cellOutput && !input.outputData) {
+        return;
+      }
+
+      setCellOutput(input.cellOutput);
+      setOutputData(input.outputData);
+      setDaoProfit(await input.getDaoProfit(client));
+    })();
+  }, [cell, previousOutput, cell.cellOutput, cell.outputData, client]);
 
   const freePercentage = useMemo(() => {
     if (!cellOutput || !outputData) {
@@ -98,7 +149,7 @@ export function Cell({
         ></div>
       </div>
       <div className="relative flex flex-col items-center">
-        <Capacity capacity={cellOutput?.capacity} />
+        <Capacity capacity={cellOutput?.capacity} profit={daoProfit} />
       </div>
       {previousOutput ? (
         <div className="relative">

diff --git a/packages/playground/src/app/tabs/Transaction.tsx b/packages/playground/src/app/tabs/Transaction.tsx
@@ -17,9 +17,12 @@ export function Transaction({
   const { client } = ccc.useCcc();
 
   const [inputAmount, setInputAmount] = useState(ccc.Zero);
+  const [inputProfit, setInputProfit] = useState(ccc.Zero);
   useEffect(() => {
     (async () => {
+      const daoProfit = await tx?.getInputsDaoProfit(client);
       const inputAmount = await tx?.getInputsCapacity(client);
+      setInputProfit(daoProfit ?? ccc.Zero);
       setInputAmount(inputAmount ?? ccc.Zero);
     })();
   }, [tx, client]);
@@ -65,7 +68,11 @@ export function Transaction({
         }`}
       >
         <div className="p-3 pb-0">
-          Inputs ({ccc.fixedPointToString(inputAmount)} CKB)
+          Inputs ({ccc.fixedPointToString(inputAmount - inputProfit)}
+          {inputProfit === ccc.Zero
+            ? " "
+            : ` + ${ccc.fixedPointToString(inputProfit)} `}
+          CKB)
         </div>
         <div className={`${disableScroll ? "" : "overflow-y-auto"} grow p-3`}>
           <div className="flex flex-wrap justify-center gap-2">{inputs}</div>
@@ -78,10 +85,10 @@ export function Transaction({
         }`}
       >
         <div className="p-3 pb-0">
-          Outputs ({ccc.fixedPointToString(outputAmount)} +{" "}
+          Outputs ({ccc.fixedPointToString(outputAmount)} +
           {outputAmount > inputAmount
-            ? "?"
-            : ccc.fixedPointToString(inputAmount - outputAmount)}{" "}
+            ? " ?"
+            : ` ${ccc.fixedPointToString(inputAmount - outputAmount)} `}
           CKB)
         </div>
         <div className={`${disableScroll ? "" : "overflow-y-auto"} grow p-3`}>