Remove Information from ReClamm UI and make it cleaner (#1)

Author: joaobrunoah

client/src/App.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-router-dom";
 import ReClamm from "./pool-types/reclamm/ReClamm";
 import StableSurge from "./pool-types/stable-surge/StableSurge";
+import { TimerProvider } from "./contexts/TimerContext";
 import styled from "styled-components";
 
 // Styled components for the menus
@@ -106,16 +107,18 @@ const Navigation = () => {
 
 function App() {
   return (
-    <Router>
-      <Navigation />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/reclamm" element={<ReClamm />} />
-        <Route path="/acl-amm" element={<Navigate to="/reclamm" />} />
-        <Route path="/stable-surge" element={<StableSurge />} />
-        <Route path="*" element={<Navigate to="/" />} />
-      </Routes>
-    </Router>
+    <TimerProvider>
+      <Router>
+        <Navigation />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/reclamm" element={<ReClamm />} />
+          <Route path="/acl-amm" element={<Navigate to="/reclamm" />} />
+          <Route path="/stable-surge" element={<StableSurge />} />
+          <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+      </Router>
+    </TimerProvider>
   );
 }
 

client/src/components/Timer.tsx

@@ -0,0 +1,71 @@
+import { Paper } from "@mui/material";
+import { Button } from "@mui/material";
+import { PlayArrow, Pause, FastForward } from "@mui/icons-material";
+import { Typography } from "@mui/material";
+
+import { formatTime } from "../utils/Time";
+import { useTimer } from "../contexts/TimerContext";
+
+export default function Timer() {
+  const {
+    blockNumber,
+    isPlaying,
+    setIsPlaying,
+    setSpeedMultiplier,
+    simulationSeconds,
+    speedMultiplier,
+  } = useTimer();
+
+  return (
+    <Paper
+      style={{
+        paddingTop: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingBottom: 1,
+        marginBottom: 16,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+          marginBottom: 16,
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={() => {
+            setIsPlaying(!isPlaying);
+          }}
+          style={{
+            paddingTop: 8,
+            paddingBottom: 9,
+            paddingRight: 5,
+            minWidth: 0,
+          }}
+          startIcon={isPlaying ? <Pause /> : <PlayArrow />}
+        />
+        <Button
+          variant="contained"
+          onClick={() => {
+            setSpeedMultiplier((prev) => (prev * 10 > 1000 ? 1 : prev * 10));
+          }}
+          startIcon={<FastForward />}
+        >
+          {speedMultiplier}x
+        </Button>
+        <Typography
+          style={{
+            fontWeight: "bold",
+            color: isPlaying ? "green" : "red",
+          }}
+        >
+          Simulation time: {formatTime(simulationSeconds)} - Block:{" "}
+          {blockNumber}
+        </Typography>
+      </div>
+    </Paper>
+  );
+}

client/src/contexts/TimerContext.tsx

@@ -0,0 +1,98 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+interface TimerContextType {
+  // Timer state
+  isPlaying: boolean;
+  setIsPlaying: (playing: boolean | ((p: boolean) => boolean)) => void;
+  simulationSeconds: number;
+  setSimulationSeconds: (seconds: number | ((s: number) => number)) => void;
+  simulationSecondsLastTick: number;
+  setSimulationSecondsLastTick: (
+    seconds: number | ((s: number) => number)
+  ) => void;
+  blockNumber: number;
+  setBlockNumber: (block: number | ((b: number) => number)) => void;
+  speedMultiplier: number;
+  setSpeedMultiplier: (speed: number | ((s: number) => number)) => void;
+
+  // Simulation configuration
+  simulationSecondsPerBlock: number;
+  setSimulationSecondsPerBlock: (seconds: number) => void;
+
+  // Timer control functions
+  resetTimer: () => void;
+  pauseTimer: () => void;
+  playTimer: () => void;
+}
+
+const TimerContext = createContext<TimerContextType | undefined>(undefined);
+
+interface TimerProviderProps {
+  children: ReactNode;
+}
+
+export const TimerProvider: React.FC<TimerProviderProps> = ({ children }) => {
+  // Timer state
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [simulationSeconds, setSimulationSeconds] = useState<number>(0);
+  const [simulationSecondsLastTick, setSimulationSecondsLastTick] =
+    useState<number>(1);
+  const [blockNumber, setBlockNumber] = useState<number>(0);
+  const [speedMultiplier, setSpeedMultiplier] = useState<number>(1);
+
+  // Simulation configuration
+  const [simulationSecondsPerBlock, setSimulationSecondsPerBlock] =
+    useState<number>(12);
+
+  // Timer control functions
+  const resetTimer = () => {
+    setSimulationSeconds(0);
+    setBlockNumber(0);
+    setSimulationSecondsLastTick(1);
+    setIsPlaying(false);
+  };
+
+  const pauseTimer = () => {
+    setIsPlaying(false);
+  };
+
+  const playTimer = () => {
+    setIsPlaying(true);
+  };
+
+  const value: TimerContextType = {
+    // Timer state
+    isPlaying,
+    setIsPlaying,
+    simulationSeconds,
+    setSimulationSeconds,
+    simulationSecondsLastTick,
+    setSimulationSecondsLastTick,
+    blockNumber,
+    setBlockNumber,
+    speedMultiplier,
+    setSpeedMultiplier,
+
+    // Simulation configuration
+    simulationSecondsPerBlock,
+    setSimulationSecondsPerBlock,
+
+    // Timer control functions
+    resetTimer,
+    pauseTimer,
+    playTimer,
+  };
+
+  return (
+    <TimerContext.Provider value={value}>{children}</TimerContext.Provider>
+  );
+};
+
+// Custom hook to use the timer context
+export const useTimer = (): TimerContextType => {
+  const context = useContext(TimerContext);
+  if (context === undefined) {
+    throw new Error("useTimer must be used within a TimerProvider");
+  }
+  return context;
+};

client/src/index.css

@@ -1,13 +1,14 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #eeeeee;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }