feat: progress bar for next batch

[Oppen]

Important

This PR requires a new .env variable

Add a new progress bar with inline label telling how much time until the next scheduled batch is pushed.

Type of change

Please delete options that are not relevant.

• New feature
• Bug fix
• Optimization
• Refactor

Testing

1. Bring up a devnet and its explorer.
2. Go to the batches page.
3. At the beginning, it should say something like "10 minutes" (default for dev) with empty (gray) progress bar.
4. After you send a batch, and then stop sending, you should see the progress bar advanding (green) and the count decreasing, about once a minute.
5. When the count reaches 0, it should stay at 0, and the bar should be fully green.
6. When you start sending batches again, it should reset to 10.

You may also play with different timeouts by setting the env var MAX_BATCH_WAIT_MINUTES to different numbers of minutes.

Checklist

• “Hotfix” to testnet, everything else to staging
• Linked to Github Issue
• This change depends on code or research by an external entity
  • Acknowledgements were updated to give credit
• Unit tests added
• This change requires new documentation.
  • Documentation has been added/updated.
• This change is an Optimization
  • Benchmarks added/run
• Has a known issue
  • Link to the open issue addressing it
• If your PR changes the Operator compatibility (Ex: Upgrade prover versions)
  • This PR adds compatibility for operator for both versions and do not change batcher/docs/examples
  • This PR updates batcher and docs/examples to the newer version. This requires the operator are already updated to be compatible

[MarcosNicolau]

@Oppen here is a suggestion to avoid clip-path, use tailwind and smooth transitions that should do it:

defrender(assigns)do~H"""<divclass="w-full relative weight-700 rounded-lg"><divclass="w-full bg-accent/20 rounded-2xl"><pclass="ml-2 text-center relative text-foreground font-bold z-10"><%=@label %></p></div><divclass="top-0 left-0 h-full bg-accent p-1 rounded-2xl absolute transition-all"style={"width: #{@progress}%"}></div></div>"""end

[MarcosNicolau]

Other than those comments, the update logic worked fantastic.

[Oppen]

@Oppen here is a suggestion to avoid clip-path, use tailwind and smooth transitions that should do it:

defrender(assigns)do~H"""<divclass="w-full relative weight-700 rounded-lg"><divclass="w-full bg-accent/20 rounded-2xl"><pclass="ml-2 text-center relative text-foreground font-bold z-10"><%=@label %></p></div><divclass="top-0 left-0 h-full bg-accent p-1 rounded-2xl absolute transition-all"style={"width: #{@progress}%"}></div></div>"""end

I can try this, but I don't quite grasp what it does. Also, note the duplicate label is intentional because it remains centered and depending on which half of the bar you see it it needs different styling.

[Oppen]

Tried in order:

1. Replacing clip-path with width: breaks the bar hard.
2. Your last version with Tailwind: looks much better but contrast on the left side of the bar is a little low:

[uri-99]

getting this when running the explorer:

Error: other error: %ArithmeticError{message: "bad argument in arithmetic expression"}

which leads to a 500: key :cost_per_proof_chart not found in: %{

[uri-99]

add a default value for the new var