Factor out SliderWithNowMarker

ultrasoundmoney · Feb 8, 2024 · fb58b70 · fb58b70
1 parent cb33e52
commit fb58b70
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 67 deletions.
diff --git a/src/mainsite/components/Slider/SliderWithNowMarker.tsx b/src/mainsite/components/Slider/SliderWithNowMarker.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import "./Slider.tsx";
+import { TimeFrameText } from "../../../components/Texts";
+
+interface Props {
+  min: number;
+  max: number;
+  value?: number;
+  step?: number;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onPointerDown?: () => void;
+  onPointerUp?: () => void;
+  thumbVisible?: boolean;
+  nowValue?: number;
+}
+
+const THUMB_WIDTH = 14;
+
+/**
+ * The browser's native slider is difficult to style and leads
+ * to very small tap targets on mobile, so instead we render a
+ * transparent slider and use a custom UI in front of it.
+ */
+const Slider: React.FC<Props> = ({
+  min,
+  max,
+  onChange,
+  onPointerDown,
+  onPointerUp,
+  step,
+  thumbVisible = true,
+  value,
+  nowValue,
+}) => {
+  const nowValuePercent =
+    nowValue !== undefined ? ((nowValue - min) / max) * 100 : undefined;
+  return (
+    <div className="relative z-10">
+      <Slider
+        min={min}
+        max={max}
+        value={value}
+        step={step}
+        onChange={onChange}
+        onPointerDown={onPointerDown}
+        onPointerUp={onPointerUp}
+        thumbVisible={thumbVisible}
+      />
+      <div
+        className={`
+                  relative flex
+                  -translate-x-1/2 select-none flex-col
+                  items-center
+                  ${nowValuePercent === undefined ? "invisible" : "visible"}
+                `}
+        style={{
+          // Positions the marker along the track whilst compensating for the thumb width as the browser natively does. 7 being half the thumb width.
+          left: `calc(${nowValuePercent}% - ${
+            (((nowValuePercent ?? 0) / 100) * 2 - 1) * 7
+          }px)`,
+        }}
+      >
+        <div className="-mt-0.5 h-2 w-0.5 rounded-b-full bg-slateus-200"></div>
+        <TimeFrameText className="mt-0.5 text-slateus-200">now</TimeFrameText>
+      </div>
+    </div>
+  );
+};
+
+export default Slider;
diff --git a/src/mainsite/components/TwoYearProjection/index.tsx b/src/mainsite/components/TwoYearProjection/index.tsx
@@ -5,7 +5,7 @@ import {
   estimatedDailyFeeBurn,
   estimatedDailyIssuance,
 } from "../../utils/metric-utils";
-import Slider from "../Slider/Slider";
+import SliderWithNowMarker from "../Slider/SliderWithNowMarker";
 import { BaseText } from "../../../components/Texts";
 import Twemoji from "../../../components/Twemoji";
 import styles from "./TwoYearProjection.module.scss";
@@ -76,24 +76,10 @@ const TwoYearProjection: FC = () => {
     undefined,
   );
 
-  const currentStakedEthPercent =
-    currentStakedEth !== undefined
-      ? ((currentStakedEth - MIN_PROJECTED_ETH_STAKING) /
-          MAX_PROJECTED_ETH_STAKING) *
-        100
-      : undefined;
-
   const [currentBaseFee, setCurrentBaseFee] = useState<number | undefined>(
     undefined,
   );
 
-  const currentBaseFeePercent =
-    currentBaseFee !== undefined
-      ? ((currentBaseFee - MIN_PROJECTED_BASE_GAS_PRICE) /
-          MAX_PROJECTED_BASE_GAS_PRICE) *
-        100
-      : undefined;
-
   useEffect(() => {
     if (effectiveBalanceSum === undefined || baseFeesOverTime === undefined) {
       return;
@@ -164,40 +150,16 @@ const TwoYearProjection: FC = () => {
             </>
           }
         >
-          <div className="relative z-10">
-            <Slider
+            <SliderWithNowMarker
               min={MIN_PROJECTED_ETH_STAKING}
               max={MAX_PROJECTED_ETH_STAKING}
               value={projectedStaking}
               step={1e6}
               onChange={handleProjectedStakingChange}
               onPointerDown={handleProjectedStakingPointerDown}
               onPointerUp={handleProjectedStakingPointerUp}
+              nowValue={currentStakedEth}
             />
-            <div
-              className={`
-                  relative  flex
-                  -translate-x-1/2 select-none flex-col
-                  items-center
-                  ${
-                    currentStakedEthPercent === undefined
-                      ? "invisible"
-                      : "visible"
-                  }
-                `}
-              style={{
-                // Positions the marker along the track whilst compensating for the thumb width as the browser natively does. 7 being half the thumb width.
-                left: `calc(${currentStakedEthPercent}% - ${
-                  (((currentStakedEthPercent ?? 0) / 100) * 2 - 1) * 7
-                }px)`,
-              }}
-            >
-              <div className="-mt-0.5 h-2 w-0.5 rounded-b-full bg-slateus-200"></div>
-              <TimeFrameText className="mt-0.5 text-slateus-200">
-                now
-              </TimeFrameText>
-            </div>
-          </div>
         </Param>
 
         <Param
@@ -214,38 +176,14 @@ const TwoYearProjection: FC = () => {
             </>
           }
         >
-          <div className="relative z-10">
-            <Slider
+            <SliderWithNowMarker
               min={MIN_PROJECTED_BASE_GAS_PRICE}
               max={MAX_PROJECTED_BASE_GAS_PRICE}
               value={projectedBaseGasPrice}
               step={1}
               onChange={handleProjectedBaseGasPriceChange}
+              nowValue={currentBaseFee}
             />
-            <div
-              className={`
-                  relative flex
-                  -translate-x-1/2 select-none flex-col
-                  items-center
-                  ${
-                    currentBaseFeePercent === undefined
-                      ? "invisible"
-                      : "visible"
-                  }
-                `}
-              style={{
-                // Positions the marker along the track whilst compensating for the thumb width as the browser natively does. 7 being half the thumb width.
-                left: `calc(${currentBaseFeePercent}% - ${
-                  (((currentBaseFeePercent ?? 0) / 100) * 2 - 1) * 7
-                }px)`,
-              }}
-            >
-              <div className="-mt-0.5 h-2 w-0.5 rounded-b-full bg-slateus-200"></div>
-              <TimeFrameText className="mt-0.5 text-slateus-200">
-                now
-              </TimeFrameText>
-            </div>
-          </div>
         </Param>
       </div>
     </>