dao: fix claim button status

cryptape · Dec 27, 2023 · a03ed8c · a03ed8c
1 parent 4cadea2
commit a03ed8c
Showing 1 changed file with 34 additions and 30 deletions.
diff --git a/src/app/accounts/[address]/dao-cells.js b/src/app/accounts/[address]/dao-cells.js
@@ -80,44 +80,48 @@ export function WithdrawRow({ address, cell, tipHeader }) {
   const depositBlockNumber = dao.getDepositBlockNumberFromWithdrawCell(cell);
   const depositHeader = useHeaderByNumber(depositBlockNumber);
   const withdrawHeader = useHeaderByNumber(cell.blockNumber);
-  const waitingDuration =
-    tipHeader && depositHeader && withdrawHeader
-      ? dao.estimateWithdrawWaitingDurationUntil(
-          tipHeader,
-          depositHeader,
-          withdrawHeader,
-        )
-      : null;
+  const loaded = tipHeader && depositHeader && withdrawHeader;
+  const waitingDuration = loaded
+    ? dao.estimateWithdrawWaitingDurationUntil(
+        tipHeader,
+        depositHeader,
+        withdrawHeader,
+      )
+    : null;
   const key = cellKey(cell);
 
   return (
     <tr key={key}>
       <td>
         <Capacity value={cell.cellOutput.capacity} />
       </td>
-      <td>
-        {tipHeader && depositHeader ? (
-          <>
-            +<Capacity value={dao.reward(cell, depositHeader, tipHeader)} />
-          </>
-        ) : (
+      {loaded ? (
+        <>
+          <td>
+            <>
+              +<Capacity value={dao.reward(cell, depositHeader, tipHeader)} />
+            </>
+          </td>
+          <td>
+            {waitingDuration ? (
+              <p>Waiting for {waitingDuration.humanize()}</p>
+            ) : (
+              <Button
+                as={Link}
+                color="green"
+                href={`/accounts/${address}/claim/${key}`}
+                className="not-prose inline-block"
+              >
+                Claim
+              </Button>
+            )}
+          </td>
+        </>
+      ) : (
+        <td colSpan="2" className="text-center">
           <Loading />
-        )}
-      </td>
-      <td>
-        {waitingDuration ? (
-          <p>Waiting for {waitingDuration.humanize()}</p>
-        ) : (
-          <Button
-            as={Link}
-            color="green"
-            href={`/accounts/${address}/claim/${key}`}
-            className="not-prose inline-block"
-          >
-            Claim
-          </Button>
-        )}
-      </td>
+        </td>
+      )}
     </tr>
   );
 }