Rename "Return Rate" with "Price After Hatch"

src/App.tsx

@@ -91,11 +91,11 @@ export default function App() {
     d0: 1e6, // Initial raise, d0 (DAI)
     theta: 0.35, // fraction allocated to reserve (.)
     p0: 0.1, // Hatch sale price p0 (DAI / token)
-    returnF: 3, // Return factor (.)
+    p1: 0.3, // Return factor (.)
     wFee: 0.05 // friction coefficient (.)
   });
 
-  const { d0, theta, p0, returnF, wFee } = curveParams;
+  const { d0, theta, p0, p1, wFee } = curveParams;
 
   /**
    * Throttle the curve update to prevent the expensive chart
@@ -116,7 +116,7 @@ export default function App() {
     d0,
     theta,
     p0,
-    returnF
+    p1
   });
 
   const [priceTimeseries, setPriceTimeseries] = useState([0]);
@@ -270,12 +270,7 @@ export default function App() {
               </Box>
 
               <Box className={classes.boxChart}>
-                <SupplyVsDemandChart
+                <SupplyVsDemandChart theta={theta} d0={d0} p0={p0} p1={p1} />
-                  returnF={returnF}
-                  theta={theta}
-                  d0={d0}
-                  p0={p0}
-                />
               </Box>
             </Paper>
           </Grid>
@@ -321,6 +316,7 @@ export default function App() {
                     priceTimeseries={priceTimeseries}
                     withdrawFeeTimeseries={withdrawFeeTimeseries}
                     p0={p0}
+                    p1={p1}
                   />
                 </Box>
               </Paper>

src/InputParams.tsx

@@ -111,7 +111,7 @@ export default function InputParams({
     d0: number;
     theta: number;
     p0: number;
-    returnF: number;
+    p1: number;
     wFee: number;
   };
   setCurveParams(newCurveParams: any): void;
@@ -119,13 +119,15 @@ export default function InputParams({
   const [d0, setD0] = useState(1e6); // Initial raise, d0 (DAI)
   const [theta, setTheta] = useState(0.35); // fraction allocated to reserve (.)
   const [p0, setP0] = useState(0.1); // Hatch sale Price p0 (DAI / token)
-  const [returnF, setReturnF] = useState(3); // Return factor (.)
+  const [p1, setP1] = useState(0.3); // Return factor (.)
   const [wFee, setWFee] = useState(0.05); // friction coefficient (.)
 
   function setParentCurveParams() {
-    setCurveParams({ d0, theta, p0, returnF, wFee });
+    setCurveParams({ d0, theta, p0, p1, wFee });
   }
 
+  const maxReturnRate = 10;
+
   const inputFields: {
     label: string;
     value: number;
@@ -168,7 +170,7 @@ export default function InputParams({
       toNum: (n: string) => parseFloat(n) * 1e-2
     },
     {
-      label: "Initial token price",
+      label: "Hatch sale price",
       value: p0,
       setter: setP0,
       min: 0.01,
@@ -181,17 +183,17 @@ export default function InputParams({
       format: (n: number) => `$${n}`
     },
     {
-      label: "Return factor",
+      label: "After hatch price",
-      value: returnF,
+      value: p1,
-      setter: setReturnF,
+      setter: setP1,
-      min: 1,
+      min: p0 || 0.1,
-      max: 10,
+      max: Number((maxReturnRate * p0).toFixed(2)),
-      step: 0.1,
+      step: 0.01,
-      unit: "x",
+      unit: "$",
-      suffix: "x",
+      prefix: "$",
-      toText: (n: number) => String(+n.toFixed(1)),
+      toText: (n: number) => String(+n.toFixed(2)),
       toNum: (n: string) => parseFloat(n),
-      format: (n: number) => `${n}x`
+      format: (n: number) => `$${n}`
     },
     {
       label: "Withdrawl fee",
@@ -208,6 +210,11 @@ export default function InputParams({
     }
   ];
 
+  useEffect(() => {
+    if (p1 < p0) setP1(p0);
+    else if (p1 > p0 * maxReturnRate) setP1(p0 * maxReturnRate);
+  }, [p0]);
+
   const classes = useStyles();
 
   return (

src/PriceSimulationChart.tsx

@@ -6,6 +6,7 @@ import {
   YAxis,
   CartesianGrid,
   Legend,
+  ReferenceLine,
   ResponsiveContainer,
   Tooltip
 } from "recharts";
@@ -15,11 +16,13 @@ import { linspace } from "./utils";
 function PriceSimulationChart({
   priceTimeseries,
   withdrawFeeTimeseries,
-  p0
+  p0,
+  p1
 }: {
   priceTimeseries: number[];
   withdrawFeeTimeseries: number[];
   p0: number;
+  p1: number;
 }) {
   // d0      - Initial raise, d0 (DAI)
   // theta   - fraction allocated to reserve (.)
@@ -50,6 +53,21 @@ function PriceSimulationChart({
 
   const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();
 
+  function ReferenceLabel(props: any) {
+    const { textAnchor, viewBox, text } = props;
+    console.log(props);
+    return (
+      <text
+        x={viewBox.x + 10}
+        y={viewBox.y - 10}
+        fill={theme.palette.text.secondary}
+        textAnchor={textAnchor}
+      >
+        {text}
+      </text>
+    );
+  }
+
   return (
     <ResponsiveContainer debounce={1}>
       <AreaChart
@@ -76,9 +94,11 @@ function PriceSimulationChart({
             priceTimeseries.length - 1
           ]}
         />
+
+        {/* Price time evolution */}
         <YAxis
           yAxisId="left"
-          domain={[Math.min(...priceTimeseries), Math.max(...priceTimeseries)]}
+          domain={[0, Math.max(...priceTimeseries, p1 * 1.25)]}
           tickFormatter={formatter}
           tick={{ fill: theme.palette.text.secondary }}
           stroke={theme.palette.text.secondary}
@@ -97,6 +117,7 @@ function PriceSimulationChart({
         />
 
         <Tooltip formatter={value => Number(value)} />
+
         <Area
           isAnimationActive={false}
           yAxisId="left"
@@ -105,6 +126,20 @@ function PriceSimulationChart({
           stroke={theme.palette.primary.main}
           fill={theme.palette.primary.main}
         />
+        <ReferenceLine
+          y={p0}
+          yAxisId="left"
+          stroke={theme.palette.primary.main}
+          strokeDasharray="9 0"
+          label={<ReferenceLabel text="Hatch sale price" />}
+        />
+        <ReferenceLine
+          y={p1}
+          yAxisId="left"
+          stroke={theme.palette.primary.main}
+          strokeDasharray="9 0"
+          label={<ReferenceLabel text="After hatch price" />}
+        />
 
         {/* Capital collected from withdraw fees - AREA */}
         <Area

src/SupplyVsDemandChart.tsx

@@ -11,18 +11,19 @@ import {
   Tooltip
 } from "recharts";
 import { getLinspaceTicks } from "./utils";
+import { getInitialParams } from "./math";
 import { useTheme } from "@material-ui/styles";
 
 function SupplyVsDemandChart({
-  returnF,
   theta,
   d0,
-  p0
+  p0,
+  p1
 }: {
-  returnF: number;
   theta: number;
   d0: number;
   p0: number;
+  p1: number;
 }) {
   // d0      - Initial raise, d0 (DAI)
   // theta   - fraction allocated to reserve (.)
@@ -31,9 +32,16 @@ function SupplyVsDemandChart({
   // wFee    - friction coefficient (.)
 
   // Hatch parameters
-  const k = returnF / (1 - theta); // Invariant power kappa (.)
+  const {
-  const R0 = (1 - theta / 100) * d0; // Initial reserve (DAI)
+    k, // Invariant power kappa (.)
-  const S0 = d0 / p0; // initial supply of tokens (token)
+    R0, // Initial reserve (DAI)
+    S0 // initial supply of tokens (token)
+  } = getInitialParams({
+    d0,
+    theta,
+    p0,
+    p1
+  });
   const S_of_R = (R: number) => S0 * (R / R0) ** (1 / k);
 
   // Function setup
@@ -138,7 +146,7 @@ function SupplyVsDemandChart({
         />
         <ReferenceLine
           x={R0}
-          stroke="#90a4ae"
+          stroke={theme.palette.primary.main}
           strokeDasharray="9 0"
           label={<ReferenceLabel />}
         />

src/math.ts

@@ -11,14 +11,14 @@ export function getInitialParams({
   d0,
   theta,
   p0,
-  returnF
+  p1
 }: {
   d0: number;
   theta: number;
   p0: number;
-  returnF: number;
+  p1: number;
 }) {
-  const k = returnF / (1 - theta); // Invariant power kappa (.)
+  const k = p1 / p0 / (1 - theta); // Invariant power kappa (.)
   const R0 = (1 - theta) * d0; // Initial reserve (DAI)
   const S0 = d0 / p0; // initial supply of tokens (token)
   const V0 = S0 ** k / R0; // invariant coef