add the following:

 - add function to calculate remaining block to pass in utils/convictionFormulas.ts
 - calculate time to pass in `useConvictionRead`
 - test add time to pass using `Countdown` component in `ProposalCard`

apps/web/components/Countdown.tsx

@@ -3,9 +3,11 @@ import { useEffect, useMemo, useState } from "react";
 export const Countdown = ({
  endTimestamp,
  format = "auto",
+ display = "auto",
 }: {
  endTimestamp: number;
  format?: "time" | "date" | "datetime" | "minutes" | "seconds" | "auto";
+ display?: "inline" | "auto";
 }) => {
  const [remainingTimeMs, setRemainingTime] = useState(0);
 
@@ -31,44 +33,52 @@ export const Countdown = ({
  const hours = (Math.floor(remainingTimeMs / (1000 * 60 * 60)) % 24) * 3 + 1;
  const days = Math.floor(remainingTimeMs / (1000 * 60 * 60 * 24)) * 3 + 1;
 
- return remainingTimeMs === 0 ?
- <div>Timeout</div>
+ const content = (
+ <>
+ {(computedMode === "datetime" || computedMode === "date") && (
+ <div className={`flex ${display !== "inline" ? "flex-col" : ""}`}>
+ <span className="countdown font-mono text-5xl">
+ <span style={{ "--value": days } as React.CSSProperties} />
+ </span>
+ days
+ </div>
+ )}
+ {(computedMode === "datetime" ||
+ computedMode === "time" ||
+ computedMode === "date") && (
+ <div className={`flex ${display !== "inline" ? "flex-col" : ""}`}>
+ <span className="countdown font-mono text-5xl">
+ <span style={{ "--value": hours } as React.CSSProperties} />
+ </span>
+ hrs
+ </div>
+ )}
+ {(computedMode === "datetime" ||
+ computedMode === "minutes" ||
+ computedMode === "time") && (
+ <div className={`flex ${display !== "inline" ? "flex-col" : ""}`}>
+ <span className="countdown font-mono text-5xl">
+ <span style={{ "--value": minutes } as React.CSSProperties} />
+ </span>
+ min
+ </div>
+ )}
+ {(computedMode === "datetime" || computedMode === "minutes") && (
+ <div className={`flex ${display !== "inline" ? "flex-col" : ""}`}>
+ <span className="countdown font-mono text-5xl">
+ <span style={{ "--value": seconds } as React.CSSProperties} />
+ </span>
+ sec
+ </div>
+ )}
+ </>
+ );
+
+ return (
+ remainingTimeMs === 0 ? <div>Timeout</div>
+ : display === "inline" ? <div className="flex gap-2">{content}</div>
  : <div className="grid grid-flow-col gap-1 text-center auto-cols-max">
- {(computedMode === "datetime" || computedMode === "date") && (
- <div className="flex flex-col">
- <span className="countdown font-mono text-5xl">
- <span style={{ "--value": days } as React.CSSProperties} />
- </span>
- days
- </div>
- )}
- {(computedMode === "datetime" ||
- computedMode === "time" ||
- computedMode === "date") && (
- <div className="flex flex-col">
- <span className="countdown font-mono text-5xl">
- <span style={{ "--value": hours } as React.CSSProperties} />
- </span>
- hrs
- </div>
- )}
- {(computedMode === "datetime" ||
- computedMode === "minutes" ||
- computedMode === "time") && (
- <div className="flex flex-col">
- <span className="countdown font-mono text-5xl">
- <span style={{ "--value": minutes } as React.CSSProperties} />
- </span>
- min
- </div>
- )}
- {(computedMode === "datetime" || computedMode === "minutes") && (
- <div className="flex flex-col">
- <span className="countdown font-mono text-5xl">
- <span style={{ "--value": seconds } as React.CSSProperties} />
- </span>
- sec
- </div>
- )}
- </div>;
+ {content}
+ </div>
+ );
 };

apps/web/components/ProposalCard.tsx

@@ -5,6 +5,7 @@ import { FetchTokenResult } from "@wagmi/core";
 import { usePathname } from "next/navigation";
 import { formatUnits } from "viem";
 import { Allo } from "#/subgraph/.graphclient";
+import { Countdown } from "./Countdown";
 import { DisplayNumber } from "./DisplayNumber";
 import { ProposalInputItem } from "./Proposals";
 import { getProposals } from "@/actions/getProposals";
@@ -62,7 +63,7 @@ export function ProposalCard({
  const isNewProposal =
  searchParams[QUERY_PARAMS.poolPage.newPropsoal] == proposalNumber;
 
- const { currentConvictionPct, thresholdPct, totalSupportPct } =
+ const { currentConvictionPct, thresholdPct, totalSupportPct, timeToPass } =
  useConvictionRead({
  proposalData,
  tokenData,
@@ -112,6 +113,8 @@ export function ProposalCard({
  </div>
  </div>
 
+ {<Countdown endTimestamp={Number(timeToPass)} display="inline" />}
+
  {/* amount requested and proposal status */}
  <div className="flex gap-6 text-neutral-soft-content">
  {!isSignalingType && (
@@ -189,7 +192,7 @@ export function ProposalCard({
  <div className="">
  <p className="mb-2 text-sm">
  Total Support: <span>{totalSupportPct}%</span> of pool
- weight{" "}
+ weight
  <span className="text-neutral-soft-content text-sm">
  {Number(supportNeededToPass) > 0 ?
  `(at least ${supportNeededToPass}% needed)`

apps/web/hooks/useConvictionRead.ts

@@ -3,11 +3,14 @@ import { Address, useContractRead } from "wagmi";
 import {
  CVProposal,
  CVStrategy,
+ CVStrategyConfig,
  Maybe,
  TokenGarden,
 } from "#/subgraph/.graphclient";
+import { useChainFromPath } from "./useChainFromPath";
 import { useChainIdFromPath } from "./useChainIdFromPath";
 import { cvStrategyABI } from "@/src/generated";
+import { getRemainingBlocksToPass } from "@/utils/convictionFormulas";
 import { logOnce } from "@/utils/log";
 import { calculatePercentageBigInt } from "@/utils/numbers";
 
@@ -24,6 +27,7 @@ type ProposalDataLight = Maybe<
  strategy: Pick<
  CVStrategy,
  "id" | "maxCVSupply" | "totalEffectiveActivePoints"
+ //need the pool.config.decay (alpha)
  >;
  }
 >;
@@ -38,31 +42,15 @@ export const useConvictionRead = ({
  enabled?: boolean;
 }) => {
  const chainIdFromPath = useChainIdFromPath();
+ const chain = useChainFromPath();
+
  const cvStrategyContract = {
  address: (proposalData?.strategy.id ?? zeroAddress) as Address,
  abi: cvStrategyABI,
  chainId: chainIdFromPath,
  enabled: !!proposalData,
  };
 
- //const blockNumber = useBlockNumber();
- //const timePassed = BigInt(blockNumber?.data ?? 0n) - (blockLast ?? 0n);
-
- //new way of getting conviction from contract
- // const { data: convictionFromContract, error: errorConviction } =
- // useContractRead({
- // ...cvStrategyContract,
- // functionName: "calculateConviction",
- // args: [
- // timePassed,
- // proposalData?.convictionLast,
- // proposalData?.stakedAmount,
- // ],
- // enabled: enabled,
- // });
-
- //
-
  const { data: updatedConviction, error: errorConviction } = useContractRead({
  ...cvStrategyContract,
  functionName: "updateProposalConviction" as any,
@@ -95,7 +83,7 @@ export const useConvictionRead = ({
  };
  }
 
- if (!proposalData || updatedConviction == null) {
+ if (!proposalData || updatedConviction == null || chain == undefined) {
  return {
  thresholdPct: undefined,
  totalSupportPct: undefined,
@@ -122,6 +110,17 @@ export const useConvictionRead = ({
  token?.decimals ?? 18,
  );
 
+ const blockTime = chain.blockTime;
+
+ const remainingBlocks = getRemainingBlocksToPass(
+ Number(thresholdFromContract),
+ Number(updatedConviction),
+ Number(proposalData.stakedAmount),
+ 0.9998876,
+ );
+
+ const timeToPass = Date.now() / 1000 + remainingBlocks * blockTime;
+
  // console.log({
  // convictionFromContract,
  // updatedConviction,
@@ -143,5 +142,6 @@ export const useConvictionRead = ({
  totalSupportPct,
  currentConvictionPct,
  updatedConviction,
+ timeToPass,
  };
 };

apps/web/utils/convictionFormulas.ts

@@ -67,3 +67,24 @@ export const calcCurrentConviction = (
  ).toFixed(2);
  return formattedCurrentConv;
 };
+
+export function getRemainingBlocksToPass(
+ threshold: number,
+ conviction: number,
+ amount: number,
+ alpha: number,
+) {
+ const a = alpha;
+ const y = threshold;
+ const y0 = conviction;
+ const x = amount;
+
+ const blocksToPass =
+ Math.log(((a - 1) * y + x) / ((a - 1) * y0 + x)) / Math.log(a);
+
+ if (blocksToPass < 0 || isNaN(blocksToPass)) {
+ return 0;
+ }
+
+ return blocksToPass;
+}