Change Initial Token Supply from a line to a dot

src/CurveDesignInputParams.tsx

@@ -10,11 +10,11 @@ export default function CurveDesignInputParams({
   curveParams: CurveParamsInterface;
   setCurveParams(newCurveParams: any): void;
 }) {
-  const [theta, setTheta] = useState(0.35); // fraction allocated to reserve (.)
-  const [p0, setP0] = useState(0.1); // Hatch sale Price p0 (DAI / token)
-  const [p1, setP1] = useState(0.3); // Return factor (.)
-  const [wFee, setWFee] = useState(0.05); // friction coefficient (.)
-  const [vHalflife, setVHalflife] = useState(52); // friction coefficient (.)
+  const [theta, setTheta] = useState(curveParams.theta); // fraction allocated to reserve (.)
+  const [p0, setP0] = useState(curveParams.p0); // Hatch sale Price p0 (DAI / token)
+  const [p1, setP1] = useState(curveParams.p1); // Return factor (.)
+  const [wFee, setWFee] = useState(curveParams.wFee); // friction coefficient (.)
+  const [vHalflife, setVHalflife] = useState(curveParams.vHalflife); // friction coefficient (.)
 
   useEffect(() => {
     setTheta(curveParams.theta);

src/SupplyVsDemandChart.tsx

@@ -7,6 +7,8 @@ import {
   CartesianGrid,
   Legend,
   ReferenceLine,
+  ReferenceDot,
+  ReferenceArea,
   ResponsiveContainer,
   Tooltip
 } from "recharts";
@@ -19,6 +21,10 @@ const isAnimationActive = false;
 const keyHorizontal = "x";
 const keyVertical = "Supply (tokens) / Collateral (DAI)";
 
+// Do to transparency and color merging issues
+// these colors are handpicked to look the closest to the theme colors
+const referenceLineColor = "#b7c1cb";
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     tooltip: {
@@ -100,12 +106,12 @@ function SupplyVsDemandChart({
     const { textAnchor, viewBox } = props;
     return (
       <text
-        x={viewBox.x + 10}
-        y={30}
-        fill={theme.palette.text.secondary}
+        x={viewBox.x + viewBox.width / 4 + 10}
+        y={viewBox.y + 20}
+        fill={referenceLineColor}
         textAnchor={textAnchor}
       >
-        Initial value
+        Initial Token Supply
       </text>
     );
   }
@@ -183,12 +189,22 @@ function SupplyVsDemandChart({
           fillOpacity={0.3}
           strokeWidth={2}
         />
+        {/* Necessary because ReferenceDot types do not allow "label" k */}
         <ReferenceLine
           x={R0_round}
-          stroke={theme.palette.primary.main}
+          y={f(R0_round)}
+          stroke={"transparent"}
           strokeDasharray="9 0"
           label={<ReferenceLabel />}
         />
+        <ReferenceDot
+          x={R0_round}
+          y={f(R0_round)}
+          r={6}
+          fill={theme.palette.primary.main}
+          stroke={2}
+        />
+
         <Legend formatter={renderColorfulLegendText} />
       </AreaChart>
     </ResponsiveContainer>