Show second by second countdown when unstaking. (#456)

apps/dapp/components/Claims.tsx

@@ -1,4 +1,6 @@
 import { MouseEventHandler } from 'react'
+import { useState } from 'react'
+import { useEffect } from 'react'
 
 import { useRecoilValue } from 'recoil'
 
@@ -37,7 +39,8 @@ function claimDurationRemaining(claim: Claim, blockHeight: number): Duration {
   } else if ('at_time' in claim.release_at) {
     const currentTimeNs = new Date().getTime() * 1000000
     return {
-      time: (Number(claim.release_at.at_time) - currentTimeNs) / 1000000000, // To seconds.
+      time:
+        (Number(claim.release_at.at_time) - currentTimeNs) / 1000000000 || 0, // To seconds.
     }
   }
 
@@ -50,16 +53,42 @@ function ClaimListItem({
   unstakingDuration,
   blockHeight,
   tokenInfo,
+  incrementClaimsAvaliable,
 }: {
   claim: Claim
   unstakingDuration: Duration
   blockHeight: number
   tokenInfo: TokenInfoResponse
+  incrementClaimsAvaliable: (n: number) => void
 }) {
   const avaliable = claimAvaliable(claim, blockHeight)
+
   const durationForHumans = humanReadableDuration(unstakingDuration)
   const durationRemaining = claimDurationRemaining(claim, blockHeight)
-  const durationRemainingForHumans = humanReadableDuration(durationRemaining)
+
+  // Once the claim expires increment claims avaliable.
+  useEffect(() => {
+    if ('time' in durationRemaining) {
+      const id = setTimeout(
+        () => incrementClaimsAvaliable(Number(claim.amount)),
+        durationRemaining.time * 1000
+      )
+      return () => clearTimeout(id)
+    }
+  }, [claim.amount, durationRemaining, incrementClaimsAvaliable])
+
+  const [durationRemainingForHumans, setDurationRemainingForHumans] = useState(
+    humanReadableDuration(durationRemaining)
+  )
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setDurationRemainingForHumans((_) =>
+        humanReadableDuration(claimDurationRemaining(claim, blockHeight))
+      )
+    }, 1000)
+    return () => clearInterval(id)
+  }, [claim, blockHeight, setDurationRemainingForHumans])
 
   return (
     <div className="my-2">
@@ -70,7 +99,7 @@ function ClaimListItem({
         </p>
       ) : (
         <div className="flex flex-wrap gap-2 text-secondary font-mono text-sm">
-          <p>{durationRemainingForHumans} left</p>
+          <p>{durationRemainingForHumans || '0'} left</p>
           <p>/ {durationForHumans}</p>
         </div>
       )}
@@ -85,9 +114,11 @@ function ClaimListItem({
 export function ClaimsPendingList({
   stakingAddress,
   tokenInfo,
+  incrementClaimsAvaliable,
 }: {
   stakingAddress: string
   tokenInfo: TokenInfoResponse
+  incrementClaimsAvaliable: (n: number) => void
 }) {
   const unstakeDuration = useRecoilValue(unstakingDuration(stakingAddress))
   const blockHeight = useRecoilValue(getBlockHeight)
@@ -109,6 +140,7 @@ export function ClaimsPendingList({
                   blockHeight={blockHeight}
                   unstakingDuration={unstakeDuration}
                   tokenInfo={tokenInfo}
+                  incrementClaimsAvaliable={incrementClaimsAvaliable}
                 />
               )
             })}

apps/dapp/components/StakingModal.tsx

@@ -68,8 +68,8 @@ function ModeButton({
   return (
     <button
       className={
-        'btn btn-sm rounded-md text-primary bg-transparent normal-case border-none font-normal' +
-        (!active ? ' hover:bg-base-100' : ' bg-base-100 hover:bg-base-100')
+        'btn btn-sm rounded-md text-primary normal-case border-none font-normal' +
+        (!active ? ' bg-transparent hover:bg-base-100' : ' bg-base-100')
       }
       onClick={onClick}
     >

apps/dapp/pages/dao/[contractAddress]/index.tsx

@@ -61,10 +61,14 @@ function DaoHome() {
   )
   const blockHeight = useRecoilValue(getBlockHeight)
   const stuff = useRecoilValue(walletClaims(daoInfo.staking_contract))
-  const claimsAvaliable = stuff.claims
+  const initialClaimsAvaliable = stuff.claims
     .filter((c) => claimAvaliable(c, blockHeight))
     .reduce((p, n) => p + Number(n.amount), 0)
 
+  // If a claim becomes avaliable while the page is open we need a way to update
+  // the number of claims avaliable.
+  const [claimsAvaliable, setClaimsAvaliable] = useState(initialClaimsAvaliable)
+
   const wallet = useRecoilValue(walletAddress)
   const [tokenBalanceLoading, setTokenBalancesLoading] = useRecoilState(
     walletTokenBalanceLoading(wallet)
@@ -263,6 +267,9 @@ function DaoHome() {
           <ClaimsPendingList
             stakingAddress={daoInfo.staking_contract}
             tokenInfo={tokenInfo}
+            incrementClaimsAvaliable={(n: number) =>
+              setClaimsAvaliable((a) => a + n)
+            }
           />
           {showStaking && (
             <StakingModal