\n ![\"logo\"](\"./favicon.ico\")
\n Commons Stack \n
\n\n \n {inputFields.map(\n ({\n label,\n value,\n setter,\n min,\n max,\n step,\n prefix,\n suffix,\n format,\n toText,\n toNum\n }) => {\n function sanitizeInput(num: number = 0) {\n if (isNaN(num)) num = 0;\n if (num > max) num = max;\n else if (num < min) num = min;\n setter(num);\n }\n\n return (\n \n \n \n {label}\n \n \n\n \n {/* {display(value)} */}\n {\n sanitizeInput(\n toNum ? toNum(e.target.value) : parseFloat(e.target.value)\n );\n setParentCurveParams();\n }}\n InputProps={{\n inputComponent: NumberFormatCustom,\n disableUnderline: true,\n inputProps: {\n prefix,\n suffix\n }\n }}\n value={toText ? toText(value) : value}\n />\n \n\n \n sanitizeInput(Number(newValue))}\n onChangeCommitted={setParentCurveParams}\n value={value}\n min={min}\n max={max}\n step={step}\n valueLabelFormat={value => format(value).replace(\"$\", \"\")}\n // marks={[\n // { value: 0, label: \"0%\" },\n // { value: 50, label: \"50%\" },\n // { value: 100, label: \"100%\" }\n // ]}\n />\n \n \n );\n }\n )}\n
\n );\n}\n","/**\n * Returns an equally spaced array of numbers `from`, `to` with `steps`.\n */\nexport function linspace({\n from = 0,\n to,\n steps\n}: {\n from?: number;\n to: number;\n steps: number;\n}) {\n const arr = [];\n for (let x = from; x <= to; x += (to - from) / steps) arr.push(x);\n return arr;\n}\n\n/**\n * Returns a uniform distribution of `num` ticks\n */\nexport function getLinspaceTicks(data: number[], num: number) {\n const desiredPoints = [];\n const step = (data[data.length - 1] - data[0]) / num;\n for (let x = data[0]; x < data[data.length - 1]; x += step) {\n desiredPoints.push(x);\n }\n if (desiredPoints.length < num + 1) desiredPoints.push(data[data.length - 1]);\n\n return desiredPoints;\n}\n\n/**\n * Returns the last element of an array\n */\nexport function getLast(a: number[]) {\n return a[a.length - 1];\n}\n\n/**\n * Returns the average of an array\n */\nexport function getAvg(a: number[]) {\n return a.reduce((t, c) => t + Math.abs(c), 0) / a.length;\n}\n\n/**\n * Waits `ms` miliseconds and resolves\n */\nexport function pause(ms: number) {\n return new Promise(r => setTimeout(r, ms));\n}\n","import React from \"react\";\nimport {\n AreaChart,\n Area,\n XAxis,\n YAxis,\n CartesianGrid,\n Legend,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip\n} from \"recharts\";\nimport { getLinspaceTicks } from \"./utils\";\nimport { useTheme } from \"@material-ui/styles\";\n\nfunction SupplyVsDemandChart({\n returnF,\n theta,\n d0,\n p0\n}: {\n returnF: number;\n theta: number;\n d0: number;\n p0: number;\n}) {\n // d0 - Initial raise, d0 (DAI)\n // theta - fraction allocated to reserve (.)\n // p0 - Hatch sale Price p0 (DAI / token)\n // returnF - Return factor (.)\n // wFee - friction coefficient (.)\n\n // Hatch parameters\n const k = returnF / (1 - theta); // Invariant power kappa (.)\n const R0 = (1 - theta / 100) * d0; // Initial reserve (DAI)\n const S0 = d0 / p0; // initial supply of tokens (token)\n const S_of_R = (R: number) => S0 * (R / R0) ** (1 / k);\n\n // Function setup\n const f = S_of_R;\n const from = 0;\n const to = 4 * R0;\n const steps = 100;\n const step = (to - from) / steps;\n\n /**\n * Prettify the result converting 1000000 to 1M\n */\n const biggest = Math.max(to, f(to));\n const [scaling, unit] =\n // Billion\n biggest > 0.5e9\n ? [1e9, \"B\"]\n : // Million\n biggest > 0.5e6\n ? [1e6, \"M\"]\n : // 1 thousand\n biggest > 0.5e3\n ? [1e3, \"K\"]\n : // No scale\n [1, \"\"];\n\n const keyHorizontal = \"x\";\n const keyVertical = \"Supply (tokens) / Reserve (DAI)\";\n\n const data = [];\n for (let x = from; x <= to; x += step) {\n data.push({\n [keyHorizontal]: x,\n [keyVertical]: f(x)\n });\n }\n\n // Chart components\n\n const theme: any = useTheme();\n\n const formatter = (n: number) =>\n (+(n / scaling).toPrecision(2)).toLocaleString();\n\n function renderColorfulLegendText(value: string) {\n return {value};\n }\n\n function ReferenceLabel(props: any) {\n const { textAnchor, viewBox } = props;\n return (\n \n {resultFields.map(({ label, value }) => (\n \n \n \n {label}\n \n \n\n \n {value} \n \n \n ))}\n
\n );\n}\n","import React from \"react\";\nimport {\n AreaChart,\n Area,\n XAxis,\n YAxis,\n CartesianGrid,\n Legend,\n ResponsiveContainer,\n Tooltip\n} from \"recharts\";\nimport { useTheme } from \"@material-ui/styles\";\nimport { linspace } from \"./utils\";\n\nfunction PriceSimulationChart({\n priceTimeseries,\n withdrawFeeTimeseries,\n p0\n}: {\n priceTimeseries: number[];\n withdrawFeeTimeseries: number[];\n p0: number;\n}) {\n // d0 - Initial raise, d0 (DAI)\n // theta - fraction allocated to reserve (.)\n // p0 - Hatch sale Price p0 (DAI / token)\n // returnF - Return factor (.)\n // wFee - friction coefficient (.)\n\n const keyHorizontal = \"x\";\n const keyVerticalLeft = \"Price (DAI / token)\";\n const keyVerticalRight = \"Collected withdraw fee (DAI)\";\n\n const data = [];\n for (let t = 0; t < priceTimeseries.length; t++) {\n data.push({\n [keyHorizontal]: t,\n [keyVerticalLeft]: priceTimeseries[t] || 0,\n [keyVerticalRight]: withdrawFeeTimeseries[t] || 0\n });\n }\n\n // Chart components\n\n const theme: any = useTheme();\n\n function renderColorfulLegendText(value: string) {\n return {value};\n }\n\n const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();\n\n return (\n \n \n {text} \n \n
\n );\n}\n","import { getAvg } from \"./utils\";\n\n/**\n * Computes the initial params given the \"user friendly\" params:\n * - Initial raise, `d0` (DAI)\n * - fraction allocated to reserve, `theta`\n * - Hatch sale price, `p0` (DAI / token)\n * - Return factor, `returnF`\n */\nexport function getInitialParams({\n d0,\n theta,\n p0,\n returnF\n}: {\n d0: number;\n theta: number;\n p0: number;\n returnF: number;\n}) {\n const k = returnF / (1 - theta); // Invariant power kappa (.)\n const R0 = (1 - theta) * d0; // Initial reserve (DAI)\n const S0 = d0 / p0; // initial supply of tokens (token)\n const V0 = S0 ** k / R0; // invariant coef\n return { k, R0, S0, V0 };\n}\n\n/**\n * Computes the price at a specific reserve `R`\n */\nexport function getPriceR({ R, V0, k }: { R: number; V0: number; k: number }) {\n return (k * R ** ((k - 1) / k)) / V0 ** (1 / k);\n}\n\n/**\n * Compute slippage at a point `R`, given a `deltaR`\n */\nexport function getSlippage({\n R,\n deltaR,\n V0,\n k\n}: {\n R: number;\n deltaR: number;\n V0: number;\n k: number;\n}) {\n const S = (V0 * R) ** (1 / k);\n const deltaS = (V0 * (R + deltaR)) ** (1 / k) - S;\n const realizedPrice = deltaR / deltaS;\n const spotPrice = getPriceR({ R, V0, k });\n return Math.abs(realizedPrice - spotPrice) / spotPrice;\n}\n\n/**\n * Generate a random delta given three components:\n * 1. Climbing sin\n * 2. Oscilating sin\n * 3. Random component\n */\nexport function getRandomDeltas({\n numSteps,\n avgTxSize\n}: {\n numSteps: number;\n avgTxSize: number;\n}) {\n const deltaR_t: number[] = [];\n for (let i = 0; i < numSteps; i++) {\n const rand = 1 - 2 * Math.random();\n const sin = Math.sin((1 / 20) * (i / numSteps));\n const ascending = Math.sin((Math.PI / 1) * (i / numSteps));\n const deltaR = 1e5 * rand + 1e5 * sin + 2e4 * ascending;\n deltaR_t.push(deltaR);\n }\n\n // Normalize random deltas with the average transaction size\n const deltaR_avg = getAvg(deltaR_t);\n return deltaR_t.map((deltaR: number) => (avgTxSize * deltaR) / deltaR_avg);\n}\n","import React, { useState, useEffect, useMemo } from \"react\";\n// Material UI\nimport { createStyles, makeStyles, Theme } from \"@material-ui/core/styles\";\nimport Container from \"@material-ui/core/Container\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Box from \"@material-ui/core/Box\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Button from \"@material-ui/core/Button\";\nimport Fade from \"@material-ui/core/Fade\";\n// Components\nimport Header from \"./Header\";\nimport InputParams from \"./InputParams\";\nimport SupplyVsDemandChart from \"./SupplyVsDemandChart\";\nimport ResultParams from \"./ResultParams\";\nimport PriceSimulationChart from \"./PriceSimulationChart\";\nimport HelpText from \"./HelpText\";\n// Utils\nimport { getLast, getAvg, pause } from \"./utils\";\nimport {\n getInitialParams,\n getPriceR,\n getRandomDeltas,\n getSlippage\n} from \"./math\";\nimport { throttle } from \"lodash\";\n// General styles\nimport \"./app.css\";\n\nconst headerOffset = 10;\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n mainContainer: {\n \"& > div:not(:last-child)\": {\n paddingBottom: theme.spacing(3)\n },\n \"& > div\": {\n \"& > div\": {\n paddingTop: \"0 !important\"\n }\n },\n paddingBottom: theme.spacing(9)\n },\n paper: {\n width: \"100%\",\n height: \"100%\",\n minHeight: 310,\n backgroundColor: \"#293640\"\n },\n box: {\n padding: theme.spacing(3, 3),\n minHeight: 310\n },\n boxButton: {\n padding: theme.spacing(3, 3)\n },\n boxHeader: {\n padding: theme.spacing(3, 3),\n height: theme.spacing(headerOffset),\n display: \"flex\",\n alignItems: \"center\",\n borderBottom: \"1px solid #313d47\"\n },\n boxChart: {\n width: \"100%\",\n height: \"100%\",\n minHeight: 310,\n maxHeight: 350,\n padding: theme.spacing(3, 3),\n // Correct the chart excessive margins\n paddingRight: \"5px\",\n paddingLeft: \"5px\"\n },\n header: {\n backgroundColor: \"#0b1216\",\n color: \"#f8f8f8\",\n textAlign: \"center\",\n padding: theme.spacing(3, 0, 6 + headerOffset),\n marginBottom: -theme.spacing(headerOffset)\n },\n button: {\n background: \"linear-gradient(290deg, #2ad179, #4ab47c)\",\n color: \"white\"\n }\n })\n);\n\nexport default function App() {\n const [curveParams, setCurveParams] = useState({\n d0: 1e6, // Initial raise, d0 (DAI)\n theta: 0.35, // fraction allocated to reserve (.)\n p0: 0.1, // Hatch sale price p0 (DAI / token)\n returnF: 3, // Return factor (.)\n wFee: 0.05 // friction coefficient (.)\n });\n\n const { d0, theta, p0, returnF, wFee } = curveParams;\n\n /**\n * Throttle the curve update to prevent the expensive chart\n * to re-render too often\n */\n const setCurveParamsThrottle = useMemo(\n () => throttle(setCurveParams, 1000),\n []\n );\n\n // Simulation results\n const {\n k, // Invariant power kappa (.)\n R0, // Initial reserve (DAI)\n S0, // initial supply of tokens (token)\n V0 // invariant coef\n } = getInitialParams({\n d0,\n theta,\n p0,\n returnF\n });\n\n const [priceTimeseries, setPriceTimeseries] = useState([0]);\n const [withdrawFeeTimeseries, setWithdrawFeeTimeseries] = useState([0]);\n const [totalReserve, setTotalReserve] = useState(R0);\n const [withdrawCount, setWithdrawCount] = useState(0);\n const [avgSlippage, setAvgSlippage] = useState(0);\n const [avgTxSize] = useState(10000);\n // Simulation state variables\n const [simulationActive, setSimulationActive] = useState(false);\n const [simulationRunning, setSimulationRunning] = useState(false);\n\n // #### TEST: Immediate simulation\n\n async function startSimulation() {\n // If there's a simulation already active, clear it\n clearSimulation();\n await pause(0);\n\n // Start simulation by setting it to active\n setSimulationActive(true);\n }\n\n function clearSimulation() {\n // Stop simulation\n setSimulationActive(false);\n // Clear simulation variables\n setWithdrawCount(0);\n setPriceTimeseries([0]);\n setWithdrawFeeTimeseries([0]);\n setAvgSlippage(0);\n }\n\n useEffect(() => {\n let canContinueSimulation = true;\n async function simulateRandomDelta() {\n const R_t: number[] = [R0];\n const p_t: number[] = [getPriceR({ R: R0, V0, k })];\n const wFee_t: number[] = [0];\n const slippage_t: number[] = [];\n\n // Random walk\n const numSteps = 100;\n const updateEveryNth = 1;\n\n // Compute the random deltas\n const deltaR_t = getRandomDeltas({ numSteps, avgTxSize });\n\n setSimulationRunning(true);\n for (let i = 0; i < numSteps; i++) {\n const deltaR = deltaR_t[i];\n\n const R = getLast(R_t);\n\n const R_next = R + deltaR;\n\n R_t.push(R_next);\n p_t.push(getPriceR({ R: R_next, V0, k }));\n slippage_t.push(getSlippage({ R, deltaR, V0, k }));\n\n // Consider withdraw fees on sales only\n if (deltaR < 0) {\n wFee_t.push(getLast(wFee_t) - deltaR * wFee);\n setWithdrawCount(c => c + 1);\n } else {\n wFee_t.push(getLast(wFee_t));\n }\n\n // Stop the simulation if it's no longer active\n if (!simulationActive || !canContinueSimulation) break;\n\n if (i % updateEveryNth === 0) {\n setPriceTimeseries(p_t);\n setWithdrawFeeTimeseries(wFee_t);\n setAvgSlippage(getAvg(slippage_t));\n setTotalReserve(R_next);\n\n // Make this run non-UI blocking\n await pause(5);\n }\n }\n setSimulationRunning(false);\n }\n\n if (simulationActive) simulateRandomDelta();\n // Return an \"unsubscribe\" function that halts the run\n return () => {\n canContinueSimulation = false;\n };\n }, [simulationActive]);\n\n const resultFields = [\n {\n label: `Average slippage (avg tx size ${avgTxSize} DAI)`,\n value: +(100 * avgSlippage).toFixed(3) + \"%\"\n },\n {\n label: `Capital collected from withdraw fees (${withdrawCount} txs)`,\n value:\n (+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() +\n \" DAI\"\n },\n {\n label: `Total reserve`,\n value: (+totalReserve.toPrecision(3)).toLocaleString() + \" DAI\"\n }\n ];\n\n const classes = useStyles();\n return (\n <>\n \n Initial raise: Lorem ipsum
\n Allocation to project: Lorem ipsum
\n Initial token price: Lorem ipsum
\n Return factor: Lorem ipsum
\n Withdrawl fee: Lorem ipsum\n \n }\n />\n
\n \n Commons Stack \n
\n\n \n {inputFields.map(\n ({\n label,\n value,\n setter,\n min,\n max,\n step,\n prefix,\n suffix,\n format,\n toText,\n toNum\n }) => {\n function sanitizeInput(num: number = 0) {\n if (isNaN(num)) num = 0;\n if (num > max) num = max;\n else if (num < min) num = min;\n setter(num);\n }\n\n return (\n \n \n \n {label}\n \n \n\n \n {/* {display(value)} */}\n {\n sanitizeInput(\n toNum ? toNum(e.target.value) : parseFloat(e.target.value)\n );\n setParentCurveParams();\n }}\n InputProps={{\n inputComponent: NumberFormatCustom,\n disableUnderline: true,\n inputProps: {\n prefix,\n suffix\n }\n }}\n value={toText ? toText(value) : value}\n />\n \n\n \n sanitizeInput(Number(newValue))}\n onChangeCommitted={setParentCurveParams}\n value={value}\n min={min}\n max={max}\n step={step}\n valueLabelFormat={value => format(value).replace(\"$\", \"\")}\n // marks={[\n // { value: 0, label: \"0%\" },\n // { value: 50, label: \"50%\" },\n // { value: 100, label: \"100%\" }\n // ]}\n />\n \n \n );\n }\n )}\n
\n );\n}\n","/**\n * Returns an equally spaced array of numbers `from`, `to` with `steps`.\n */\nexport function linspace({\n from = 0,\n to,\n steps\n}: {\n from?: number;\n to: number;\n steps: number;\n}) {\n const arr = [];\n for (let x = from; x <= to; x += (to - from) / steps) arr.push(x);\n return arr;\n}\n\n/**\n * Returns a uniform distribution of `num` ticks\n */\nexport function getLinspaceTicks(data: number[], num: number) {\n const desiredPoints = [];\n const step = (data[data.length - 1] - data[0]) / num;\n for (let x = data[0]; x < data[data.length - 1]; x += step) {\n desiredPoints.push(x);\n }\n if (desiredPoints.length < num + 1) desiredPoints.push(data[data.length - 1]);\n\n return desiredPoints;\n}\n\n/**\n * Returns the last element of an array\n */\nexport function getLast(a: number[]) {\n return a[a.length - 1];\n}\n\n/**\n * Returns the average of an array\n */\nexport function getAvg(a: number[]) {\n return a.reduce((t, c) => t + Math.abs(c), 0) / a.length;\n}\n\n/**\n * Waits `ms` miliseconds and resolves\n */\nexport function pause(ms: number) {\n return new Promise(r => setTimeout(r, ms));\n}\n","import React from \"react\";\nimport {\n AreaChart,\n Area,\n XAxis,\n YAxis,\n CartesianGrid,\n Legend,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip\n} from \"recharts\";\nimport { getLinspaceTicks } from \"./utils\";\nimport { useTheme } from \"@material-ui/styles\";\n\nfunction SupplyVsDemandChart({\n returnF,\n theta,\n d0,\n p0\n}: {\n returnF: number;\n theta: number;\n d0: number;\n p0: number;\n}) {\n // d0 - Initial raise, d0 (DAI)\n // theta - fraction allocated to reserve (.)\n // p0 - Hatch sale Price p0 (DAI / token)\n // returnF - Return factor (.)\n // wFee - friction coefficient (.)\n\n // Hatch parameters\n const k = returnF / (1 - theta); // Invariant power kappa (.)\n const R0 = (1 - theta / 100) * d0; // Initial reserve (DAI)\n const S0 = d0 / p0; // initial supply of tokens (token)\n const S_of_R = (R: number) => S0 * (R / R0) ** (1 / k);\n\n // Function setup\n const f = S_of_R;\n const from = 0;\n const to = 4 * R0;\n const steps = 100;\n const step = (to - from) / steps;\n\n /**\n * Prettify the result converting 1000000 to 1M\n */\n const biggest = Math.max(to, f(to));\n const [scaling, unit] =\n // Billion\n biggest > 0.5e9\n ? [1e9, \"B\"]\n : // Million\n biggest > 0.5e6\n ? [1e6, \"M\"]\n : // 1 thousand\n biggest > 0.5e3\n ? [1e3, \"K\"]\n : // No scale\n [1, \"\"];\n\n const keyHorizontal = \"x\";\n const keyVertical = \"Supply (tokens) / Reserve (DAI)\";\n\n const data = [];\n for (let x = from; x <= to; x += step) {\n data.push({\n [keyHorizontal]: x,\n [keyVertical]: f(x)\n });\n }\n\n // Chart components\n\n const theme: any = useTheme();\n\n const formatter = (n: number) =>\n (+(n / scaling).toPrecision(2)).toLocaleString();\n\n function renderColorfulLegendText(value: string) {\n return {value};\n }\n\n function ReferenceLabel(props: any) {\n const { textAnchor, viewBox } = props;\n return (\n \n {resultFields.map(({ label, value }) => (\n \n \n \n {label}\n \n \n\n \n {value} \n \n \n ))}\n
\n );\n}\n","import React from \"react\";\nimport {\n AreaChart,\n Area,\n XAxis,\n YAxis,\n CartesianGrid,\n Legend,\n ResponsiveContainer,\n Tooltip\n} from \"recharts\";\nimport { useTheme } from \"@material-ui/styles\";\nimport { linspace } from \"./utils\";\n\nfunction PriceSimulationChart({\n priceTimeseries,\n withdrawFeeTimeseries,\n p0\n}: {\n priceTimeseries: number[];\n withdrawFeeTimeseries: number[];\n p0: number;\n}) {\n // d0 - Initial raise, d0 (DAI)\n // theta - fraction allocated to reserve (.)\n // p0 - Hatch sale Price p0 (DAI / token)\n // returnF - Return factor (.)\n // wFee - friction coefficient (.)\n\n const keyHorizontal = \"x\";\n const keyVerticalLeft = \"Price (DAI / token)\";\n const keyVerticalRight = \"Collected withdraw fee (DAI)\";\n\n const data = [];\n for (let t = 0; t < priceTimeseries.length; t++) {\n data.push({\n [keyHorizontal]: t,\n [keyVerticalLeft]: priceTimeseries[t] || 0,\n [keyVerticalRight]: withdrawFeeTimeseries[t] || 0\n });\n }\n\n // Chart components\n\n const theme: any = useTheme();\n\n function renderColorfulLegendText(value: string) {\n return {value};\n }\n\n const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();\n\n return (\n \n \n {text} \n \n
\n );\n}\n","import React, { useState, useEffect, useMemo } from \"react\";\n// Material UI\nimport { createStyles, makeStyles, Theme } from \"@material-ui/core/styles\";\nimport Container from \"@material-ui/core/Container\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Box from \"@material-ui/core/Box\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Button from \"@material-ui/core/Button\";\nimport Fade from \"@material-ui/core/Fade\";\n// Components\nimport Header from \"./Header\";\nimport InputParams from \"./InputParams\";\nimport SupplyVsDemandChart from \"./SupplyVsDemandChart\";\nimport ResultParams from \"./ResultParams\";\nimport PriceSimulationChart from \"./PriceSimulationChart\";\nimport HelpText from \"./HelpText\";\n// Utils\nimport { getLast, getAvg, pause } from \"./utils\";\nimport { throttle } from \"lodash\";\n// General styles\nimport \"./app.css\";\n\nconst headerOffset = 10;\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n mainContainer: {\n \"& > div:not(:last-child)\": {\n paddingBottom: theme.spacing(3)\n },\n \"& > div\": {\n \"& > div\": {\n paddingTop: \"0 !important\"\n }\n },\n paddingBottom: theme.spacing(9)\n },\n paper: {\n width: \"100%\",\n height: \"100%\",\n minHeight: 310,\n backgroundColor: \"#293640\"\n },\n box: {\n padding: theme.spacing(3, 3),\n minHeight: 310\n },\n boxButton: {\n padding: theme.spacing(3, 3)\n },\n boxHeader: {\n padding: theme.spacing(3, 3),\n height: theme.spacing(headerOffset),\n display: \"flex\",\n alignItems: \"center\",\n borderBottom: \"1px solid #313d47\"\n },\n boxChart: {\n width: \"100%\",\n height: \"100%\",\n minHeight: 310,\n maxHeight: 350,\n padding: theme.spacing(3, 3),\n // Correct the chart excessive margins\n paddingRight: \"5px\",\n paddingLeft: \"5px\"\n },\n header: {\n backgroundColor: \"#0b1216\",\n color: \"#f8f8f8\",\n textAlign: \"center\",\n padding: theme.spacing(3, 0, 6 + headerOffset),\n marginBottom: -theme.spacing(headerOffset)\n },\n button: {\n background: \"linear-gradient(290deg, #2ad179, #4ab47c)\",\n color: \"white\"\n }\n })\n);\n\nexport default function App() {\n const [curveParams, setCurveParams] = useState({\n d0: 1e6, // Initial raise, d0 (DAI)\n theta: 0.35, // fraction allocated to reserve (.)\n p0: 0.1, // Hatch sale Price p0 (DAI / token)\n returnF: 3, // Return factor (.)\n wFee: 0.05 // friction coefficient (.)\n });\n\n const { d0, theta, p0, returnF, wFee } = curveParams;\n\n /**\n * Throttle the curve update to prevent the expensive chart\n * to re-render too often\n */\n const setCurveParamsThrottle = useMemo(\n () => throttle(setCurveParams, 1000),\n []\n );\n\n // Simulation results\n const k = returnF / (1 - theta); // Invariant power kappa (.)\n const R0 = (1 - theta / 100) * d0; // Initial reserve (DAI)\n const S0 = d0 / p0; // initial supply of tokens (token)\n const V0 = S0 ** k / R0; // invariant coef\n\n const [priceTimeseries, setPriceTimeseries] = useState([0]);\n const [withdrawFeeTimeseries, setWithdrawFeeTimeseries] = useState([0]);\n const [totalReserve, setTotalReserve] = useState(R0);\n const [withdrawCount, setWithdrawCount] = useState(0);\n const [avgSlippage, setAvgSlippage] = useState(0);\n const [avgTxSize] = useState(10000);\n // Simulation state variables\n const [simulationActive, setSimulationActive] = useState(false);\n const [simulationRunning, setSimulationRunning] = useState(false);\n\n // #### TEST: Immediate simulation\n\n async function startSimulation() {\n // If there's a simulation already active, clear it\n clearSimulation();\n await pause(0);\n\n // Start simulation by setting it to active\n setSimulationActive(true);\n }\n\n function clearSimulation() {\n // Stop simulation\n setSimulationActive(false);\n // Clear simulation variables\n setWithdrawCount(0);\n setPriceTimeseries([0]);\n setWithdrawFeeTimeseries([0]);\n setAvgSlippage(0);\n }\n\n useEffect(() => {\n let canContinueSimulation = true;\n async function simulateRandomDelta() {\n const R_t: number[] = [R0];\n const S_t: number[] = [S0];\n const p_t: number[] = [R0 / S0];\n const wFee_t: number[] = [0];\n const slippage_t: number[] = [];\n\n // Random walk\n const numSteps = 100;\n const updateEveryNth = 1;\n\n // Compute the random deltas\n const deltaR_t: number[] = [];\n for (let i = 0; i < numSteps; i++) {\n const rand = 1 - 2 * Math.random();\n const sin = Math.sin((1 / 20) * (i / numSteps));\n const ascending = Math.sin((Math.PI / 1) * (i / numSteps));\n const deltaR = 1e5 * rand + 1e5 * sin + 2e4 * ascending;\n deltaR_t.push(deltaR);\n }\n\n // Normalize random deltas with the average transaction size\n const deltaR_avg = getAvg(deltaR_t);\n const deltaR_t_normalized = deltaR_t.map(\n (deltaR: number) => (avgTxSize * deltaR) / deltaR_avg\n );\n\n setSimulationRunning(true);\n for (let i = 0; i < numSteps; i++) {\n const deltaR = deltaR_t_normalized[i];\n\n // Protect against too strong negative deltas\n const R = getLast(R_t);\n const S = getLast(S_t);\n const p = getLast(p_t);\n\n const R_next = R + deltaR;\n const deltaS = (V0 * (R + deltaR)) ** (1 / k) - S;\n const S_next = S + deltaS;\n\n R_t.push(R_next);\n S_t.push(S_next);\n p_t.push(R_next / S_next);\n // Consider withdraw fees on sales only\n if (deltaR < 0) {\n wFee_t.push(getLast(wFee_t) - deltaR * wFee);\n setWithdrawCount(c => c + 1);\n } else {\n wFee_t.push(getLast(wFee_t));\n }\n\n const p_next = getLast(p_t);\n // const realizedPrice = deltaR / deltaS;\n const spotPrice = p;\n const slippage = Math.abs(p_next - spotPrice) / spotPrice / 2;\n slippage_t.push(slippage);\n\n // Stop the simulation if it's no longer active\n if (!simulationActive || !canContinueSimulation) break;\n\n if (i % updateEveryNth === 0) {\n setPriceTimeseries(p_t);\n setWithdrawFeeTimeseries(wFee_t);\n setAvgSlippage(getAvg(slippage_t));\n setTotalReserve(R_next);\n\n // Make this run non-UI blocking\n await pause(5);\n }\n }\n setSimulationRunning(false);\n }\n\n if (simulationActive) simulateRandomDelta();\n // Return an \"unsubscribe\" function that halts the run\n return () => {\n canContinueSimulation = false;\n };\n }, [simulationActive]);\n\n const resultFields = [\n {\n label: `Average slippage (avg tx size ${avgTxSize} DAI)`,\n value: +(100 * avgSlippage).toFixed(3) + \"%\"\n },\n {\n label: `Capital collected from withdraw fees (${withdrawCount} txs)`,\n value:\n (+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() +\n \" DAI\"\n },\n {\n label: `Total reserve`,\n value: (+totalReserve.toPrecision(3)).toLocaleString() + \" DAI\"\n }\n ];\n\n const classes = useStyles();\n return (\n <>\n \n Initial raise: Lorem ipsum
\n Allocation to project: Lorem ipsum
\n Initial token price: Lorem ipsum
\n Return factor: Lorem ipsum
\n Withdrawl fee: Lorem ipsum\n \n }\n />\n