\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 secondaryColor,\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 onChangeCommited();\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={onChangeCommited}\n value={value}\n min={min}\n max={max}\n step={step}\n valueLabelFormat={value => format(value).replace(\"$\", \"\")}\n />\n \n \n );\n }\n )}\n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { InputFieldInterface, CurveParamsInterface } from \"./types\";\nimport InputParams from \"./InputParams\";\n\nexport default function CurveDesignInputParams({\n curveParams,\n setCurveParams\n}: {\n curveParams: CurveParamsInterface;\n setCurveParams(newCurveParams: any): void;\n}) {\n const [theta, setTheta] = useState(0.35); // fraction allocated to reserve (.)\n const [p0, setP0] = useState(0.1); // Hatch sale Price p0 (DAI / token)\n const [p1, setP1] = useState(0.3); // Return factor (.)\n const [wFee, setWFee] = useState(0.05); // friction coefficient (.)\n\n useEffect(() => {\n setTheta(curveParams.theta);\n setP0(curveParams.p0);\n setP1(curveParams.p1);\n setWFee(curveParams.wFee);\n }, [curveParams]);\n\n function _setP0(newP0: number) {\n setP0(newP0);\n if (p1 < newP0) setP1(newP0);\n else if (p1 > newP0 * maxReturnRate) setP1(newP0 * maxReturnRate);\n }\n\n function setParentCurveParams() {\n setCurveParams((params: CurveParamsInterface) => ({\n ...params,\n theta,\n p0,\n p1,\n wFee\n }));\n }\n\n const maxReturnRate = 10;\n\n const inputFields: InputFieldInterface[] = [\n {\n label: \"Allocation to funding pool\",\n value: theta,\n setter: setTheta,\n min: 0,\n max: 0.9,\n step: 0.01,\n suffix: \"%\",\n format: (n: number) => `${Math.round(100 * n)}%`,\n toText: (n: number) => String(+(n * 1e2).toFixed(0)),\n toNum: (n: string) => parseFloat(n) * 1e-2\n },\n {\n label: \"Hatch price (DAI/token)\",\n value: p0,\n setter: _setP0,\n min: 0.01,\n max: 1,\n step: 0.01,\n toText: (n: number) => String(+n.toFixed(2)),\n toNum: (n: string) => parseFloat(n),\n format: (n: number) => `$${n}`\n },\n {\n label: \"Post-hatch price (DAI/token)\",\n value: p1,\n setter: setP1,\n min: p0 || 0.1,\n max: Number((maxReturnRate * p0).toFixed(2)),\n step: 0.01,\n toText: (n: number) => String(+n.toFixed(2)),\n toNum: (n: string) => parseFloat(n),\n format: (n: number) => `$${n}`\n },\n {\n label: \"Exit tribute\",\n value: wFee,\n setter: setWFee,\n min: 0,\n max: 0.1,\n step: 0.001,\n suffix: \"%\",\n format: (n: number) => `${+(100 * n).toFixed(1)}%`,\n toText: (n: number) => String(+(n * 1e2).toFixed(1)),\n toNum: (n: string) => parseFloat(n) * 1e-2\n }\n ];\n\n return (\n \n \n \n {toolTipData.map(([name, value, unit]) => (\n
\n
\n );\n } else return null;\n }\n\n return (\n | {name} | \n{value} | \n{unit} | \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 ReferenceLine,\n ResponsiveContainer,\n Tooltip\n} from \"recharts\";\nimport { createStyles, makeStyles, Theme } from \"@material-ui/core/styles\";\nimport { useTheme } from \"@material-ui/styles\";\nimport { linspace } from \"./utils\";\n\nconst keyHorizontal = \"x\";\nconst keyVerticalLeft = \"Price (DAI/token)\";\nconst keyVerticalRight = \"Total exit tributes (DAI)\";\nconst keyVerticalLeft2 = \"Floor price (DAI/token)\";\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n tooltip: {\n border: \"1px solid #313d47\",\n backgroundColor: \"#384b59\",\n padding: theme.spacing(1),\n color: \"#c7ccd2\"\n }\n })\n);\n\nfunction PriceSimulationChart({\n priceTimeseries,\n withdrawFeeTimeseries,\n floorpriceTimeseries,\n p0,\n p1\n}: {\n priceTimeseries: number[];\n withdrawFeeTimeseries: number[];\n floorpriceTimeseries: number[];\n p0: number;\n p1: 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 data = [];\n for (let t = 0; t < priceTimeseries.length; t++) {\n data.push({\n [keyHorizontal]: t,\n [keyVerticalLeft]: priceTimeseries[t] || 0,\n [keyVerticalLeft2]: floorpriceTimeseries[t] || 0,\n [keyVerticalRight]: withdrawFeeTimeseries[t] || 0\n });\n }\n\n // Chart components\n\n const theme: any = useTheme();\n const classes = useStyles();\n\n function renderColorfulLegendText(value: string) {\n return {value};\n }\n\n const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();\n\n function ReferenceLabel(props: any) {\n const { textAnchor, viewBox, text } = props;\n return (\n \n \n \n {toolTipData.map(([name, value, unit]) => (\n
\n
\n );\n } else return null;\n }\n\n return (\n | {name} | \n{value} | \n{unit} | \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\";\n// Components\nimport Header from \"./Header\";\nimport CurveDesignInputParams from \"./CurveDesignInputParams\";\nimport SimulationInputParams from \"./SimulationInputParams\";\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 getMinPrice,\n getS,\n vest_tokens,\n getMinR,\n getSlippage,\n getTxDistribution,\n getDeltaR_priceGrowth,\n rv_U,\n getMedian,\n getSum\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 simulationContainer: {\n minHeight: \"442px\"\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 },\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 boxBorderBottom: {\n borderBottom: \"1px solid #313d47\"\n },\n initialRaise: {\n justifyContent: \"space-between\"\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 boxPlaceholder: {\n padding: theme.spacing(3, 3),\n display: \"flex\",\n height: \"100%\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: theme.palette.text.secondary,\n opacity: 0.4\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)\", // Green gradient\n background: \"linear-gradient(290deg, #1880e0, #3873d8)\", // blue gradient\n color: \"white\"\n },\n // Descriptions\n descriptionContainer: {\n \"& > div:not(:last-child)\": {\n paddingBottom: theme.spacing(1),\n marginBottom: theme.spacing(1),\n borderBottom: \"1px solid #3f5463\"\n },\n \"& td\": {\n verticalAlign: \"top\",\n padding: theme.spacing(0.5)\n }\n },\n descriptionTitle: {\n fontWeight: theme.typography.fontWeightBold,\n padding: theme.spacing(0.5)\n },\n descriptionName: {\n fontWeight: theme.typography.fontWeightBold\n }\n })\n);\n\nconst parameterDescriptions = [\n {\n name: \"Initial raise\",\n text: \"Total funds raised in the hatch period of the ABC launch\"\n },\n {\n name: \"Allocation to funding pool\",\n text:\n \"The percentage of the funds raised in the Hatch sale that go directly into the project funding pool to compensate future work done in the project\"\n },\n {\n name: \"Hatch price\",\n text:\n \"The price paid per 'ABC token' by community members involved in hatching the project\"\n },\n {\n name: \"Post-hatch price\",\n text:\n \"The price of the 'ABC token' when the curve enters the open phase and is live for public participation\"\n },\n {\n name: \"Exit tribute\",\n text:\n \"The percentage of funds that are diverted to the project funding pool from community members who exit funds from the project by burning 'ABC tokens' in exchange for collateral\"\n }\n];\n\nconst resultParameterDescriptions = [\n {\n name: \"Total reserve\",\n text:\n \"Total DAI in the smart contract reserve at the end of the simulated period\"\n },\n {\n name: \"Funds generated from initial hatch\",\n text:\n \"Fraction of the funds (theta) raised during the hatch that go directly to the cause\"\n },\n {\n name: \"Funds generated from exit tributes\",\n text:\n \"Cumulative amount of exit tributes collected from only exit /sell transactions\"\n },\n {\n name: \"Average slippage\",\n text:\n \"Average of the slippage of each transaction occured during the simulation period\"\n }\n];\n\nexport default function App() {\n const [curveParams, setCurveParams] = useState({\n theta: 0.35, // fraction allocated to reserve (.)\n p0: 0.1, // Hatch sale price p0 (DAI / token)\n p1: 0.3, // Return factor (.)\n wFee: 0.05, // friction coefficient (.)\n d0: 3e6 // Initial raise, d0 (DAI)\n });\n\n const { d0, theta, p0, p1, 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, 250),\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 p1\n });\n\n const [priceTimeseries, setPriceTimeseries] = useState([0]);\n const [withdrawFeeTimeseries, setWithdrawFeeTimeseries] = useState([0]);\n const [floorpriceTimeseries, setFloorpriceTimeseries] = useState([0]);\n const [totalReserve, setTotalReserve] = useState(R0);\n const [withdrawCount, setWithdrawCount] = useState(0);\n const [avgSlippage, setAvgSlippage] = useState(0);\n const [avgTxSize, setAvgTxSize] = useState(0);\n // Simulation state variables\n const [simulationActive, setSimulationActive] = useState(false);\n const [simulationRunning, setSimulationRunning] = useState(false);\n\n useEffect(() => {\n setSimulationActive(false);\n }, [curveParams]);\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\n async function simulateRandomDelta() {\n const R_t: number[] = [R0];\n const S_t: number[] = [S0];\n const p_t: number[] = [getPriceR({ R: R0, V0, k })];\n const wFee_t: number[] = [0];\n const slippage_t: number[] = [];\n const avgTxSize_t: number[] = [];\n\n // hatchers tokens = S0[section added by Z]\n const H_t: number[] = [S0]; // total hatcher tokens not vested\n const floorprice_t: number[] = []; // initially the price is the floor as all tokens are hatcher tokens\n\n // Random walk\n const numSteps = 52;\n const u_min = 0.97;\n const u_max = 1.04;\n const tx_spread = 10;\n // vesting(should this be exposed in the app ?)\n const cliff = 8; // weeks before vesting starts ~2 months\n const halflife = 52; // 26 weeks, half life is ~6 months\n // percentage of the hatch tokens which vest per week(since that is our timescale in the sim)\n\n // numSteps = 52 take 8ms to run\n setSimulationRunning(true);\n for (let t = 0; t < numSteps; t++) {\n const txsWeek = rv_U(5, 2 * t + 5);\n\n const R = getLast(R_t);\n const S = getLast(S_t);\n const H = getLast(H_t);\n\n // enforce the effects of the unvested tokens not being burnable\n let u_lower;\n if (H === S) {\n u_lower = 1;\n } else {\n const R_ratio = getMinR({ S, H, V0, k }) / R;\n u_lower = Math.max(1 - R_ratio, u_min);\n }\n const priceGrowth = rv_U(u_lower, u_max);\n\n const deltaR = getDeltaR_priceGrowth({ R, k, priceGrowth });\n const R_next = R + deltaR;\n\n const txs = getTxDistribution({\n sum: deltaR,\n num: txsWeek,\n spread: tx_spread\n });\n // Compute slippage\n const slippage_txs = txs.map(txR =>\n getSlippage({ R, deltaR: txR, V0, k })\n );\n const slippage = getMedian(slippage_txs);\n\n const txsWithdraw = txs.filter(tx => tx < 0);\n const wFees = -wFee * getSum(txsWithdraw);\n // txsWithdraw.reduce((t, c) => t + c, 0);\n\n // Vest\n const delta_H = vest_tokens({ week: t, H, halflife, cliff });\n const H_next = H - delta_H;\n\n // find floor price\n const S_next = getS({ R, V0, k });\n const floorprice_next = getMinPrice({\n S: S_next,\n H: S0 - H_next,\n V0,\n k\n });\n\n const _avgTxSize = getMedian(txsWithdraw);\n\n R_t.push(R_next);\n p_t.push(getPriceR({ R: R_next, V0, k }));\n slippage_t.push(slippage);\n avgTxSize_t.push(_avgTxSize);\n wFee_t.push(getLast(wFee_t) + wFees);\n H_t.push(H_next);\n floorprice_t.push(floorprice_next);\n setWithdrawCount(c => c + txsWithdraw.length);\n\n // Stop the simulation if it's no longer active\n if (!simulationActive || !canContinueSimulation) break;\n }\n\n // floorprice_t is missing one data point\n floorprice_t[floorprice_t.length] = floorprice_t[floorprice_t.length - 1];\n\n setPriceTimeseries(p_t);\n setWithdrawFeeTimeseries(wFee_t);\n setFloorpriceTimeseries(floorprice_t);\n setAvgSlippage(getAvg(slippage_t));\n setAvgTxSize(getAvg(avgTxSize_t));\n setTotalReserve(getLast(R_t));\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: `Total reserve`,\n value: (+totalReserve.toPrecision(3)).toLocaleString() + \" DAI\"\n },\n {\n label: `Funds generated from initial hatch`,\n value: Math.round(d0 * theta).toLocaleString() + \" DAI\"\n },\n {\n label: `Funds generated from exit tributes (${withdrawCount} txs)`,\n value:\n (+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() +\n \" DAI\"\n },\n {\n label: `Average slippage (avg tx size ${Math.round(\n avgTxSize\n ).toLocaleString()} DAI)`,\n value: +(100 * avgSlippage).toFixed(3) + \"%\"\n }\n ];\n\n const classes = useStyles();\n\n return (\n <>\n \n \n Parameters description:\n \n
\n | \n | \n \n | \n
\n \n Result parameters description:\n \n
\n | \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 secondaryColor,\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 onChangeCommited();\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={onChangeCommited}\n value={value}\n min={min}\n max={max}\n step={step}\n valueLabelFormat={value => format(value).replace(\"$\", \"\")}\n />\n \n \n );\n }\n )}\n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { InputFieldInterface, CurveParamsInterface } from \"./types\";\nimport InputParams from \"./InputParams\";\n\nexport default function CurveDesignInputParams({\n curveParams,\n setCurveParams\n}: {\n curveParams: CurveParamsInterface;\n setCurveParams(newCurveParams: any): void;\n}) {\n const [theta, setTheta] = useState(0.35); // fraction allocated to reserve (.)\n const [p0, setP0] = useState(0.1); // Hatch sale Price p0 (DAI / token)\n const [p1, setP1] = useState(0.3); // Return factor (.)\n const [wFee, setWFee] = useState(0.05); // friction coefficient (.)\n\n useEffect(() => {\n setTheta(curveParams.theta);\n setP0(curveParams.p0);\n setP1(curveParams.p1);\n setWFee(curveParams.wFee);\n }, [curveParams]);\n\n function _setP0(newP0: number) {\n setP0(newP0);\n if (p1 < newP0) setP1(newP0);\n else if (p1 > newP0 * maxReturnRate) setP1(newP0 * maxReturnRate);\n }\n\n function setParentCurveParams() {\n setCurveParams((params: CurveParamsInterface) => ({\n ...params,\n theta,\n p0,\n p1,\n wFee\n }));\n }\n\n const maxReturnRate = 10;\n\n const inputFields: InputFieldInterface[] = [\n {\n label: \"Allocation to funding pool\",\n value: theta,\n setter: setTheta,\n min: 0,\n max: 0.9,\n step: 0.01,\n suffix: \"%\",\n format: (n: number) => `${Math.round(100 * n)}%`,\n toText: (n: number) => String(+(n * 1e2).toFixed(0)),\n toNum: (n: string) => parseFloat(n) * 1e-2\n },\n {\n label: \"Hatch price (DAI/token)\",\n value: p0,\n setter: _setP0,\n min: 0.01,\n max: 1,\n step: 0.01,\n toText: (n: number) => String(+n.toFixed(2)),\n toNum: (n: string) => parseFloat(n),\n format: (n: number) => `$${n}`\n },\n {\n label: \"Post-hatch price (DAI/token)\",\n value: p1,\n setter: setP1,\n min: p0 || 0.1,\n max: Number((maxReturnRate * p0).toFixed(2)),\n step: 0.01,\n toText: (n: number) => String(+n.toFixed(2)),\n toNum: (n: string) => parseFloat(n),\n format: (n: number) => `$${n}`\n },\n {\n label: \"Exit tribute\",\n value: wFee,\n setter: setWFee,\n min: 0,\n max: 0.1,\n step: 0.001,\n suffix: \"%\",\n format: (n: number) => `${+(100 * n).toFixed(1)}%`,\n toText: (n: number) => String(+(n * 1e2).toFixed(1)),\n toNum: (n: string) => parseFloat(n) * 1e-2\n }\n ];\n\n return (\n \n \n \n {toolTipData.map(([name, value, unit]) => (\n
\n
\n );\n } else return null;\n }\n\n return (\n | {name} | \n{value} | \n{unit} | \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 ReferenceLine,\n ResponsiveContainer,\n Tooltip\n} from \"recharts\";\nimport { createStyles, makeStyles, Theme } from \"@material-ui/core/styles\";\nimport { useTheme } from \"@material-ui/styles\";\nimport { linspace } from \"./utils\";\n\nconst keyHorizontal = \"x\";\nconst keyVerticalLeft = \"Price (DAI/token)\";\nconst keyVerticalRight = \"Total exit tributes (DAI)\";\nconst keyVerticalLeft2 = \"Floor price (DAI/token)\";\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n tooltip: {\n border: \"1px solid #313d47\",\n backgroundColor: \"#384b59\",\n padding: theme.spacing(1),\n color: \"#c7ccd2\"\n }\n })\n);\n\nfunction PriceSimulationChart({\n priceTimeseries,\n withdrawFeeTimeseries,\n floorpriceTimeseries,\n p0,\n p1\n}: {\n priceTimeseries: number[];\n withdrawFeeTimeseries: number[];\n floorpriceTimeseries: number[];\n p0: number;\n p1: 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 data = [];\n for (let t = 0; t < priceTimeseries.length; t++) {\n data.push({\n [keyHorizontal]: t,\n [keyVerticalLeft]: priceTimeseries[t] || 0,\n [keyVerticalLeft2]: floorpriceTimeseries[t] || 0,\n [keyVerticalRight]: withdrawFeeTimeseries[t] || 0\n });\n }\n\n // Chart components\n\n const theme: any = useTheme();\n const classes = useStyles();\n\n function renderColorfulLegendText(value: string) {\n return {value};\n }\n\n const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();\n\n function ReferenceLabel(props: any) {\n const { textAnchor, viewBox, text } = props;\n return (\n \n \n \n {toolTipData.map(([name, value, unit]) => (\n
\n
\n );\n } else return null;\n }\n\n return (\n | {name} | \n{value} | \n{unit} | \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\";\n// Components\nimport Header from \"./Header\";\nimport CurveDesignInputParams from \"./CurveDesignInputParams\";\nimport SimulationInputParams from \"./SimulationInputParams\";\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 getMinPrice,\n getS,\n vest_tokens,\n getR,\n getSlippage,\n getTxDistribution,\n getDeltaR_priceGrowth,\n rv_U,\n getMedian,\n getSum\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 simulationContainer: {\n minHeight: \"442px\"\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 },\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 boxBorderBottom: {\n borderBottom: \"1px solid #313d47\"\n },\n initialRaise: {\n justifyContent: \"space-between\"\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 boxPlaceholder: {\n padding: theme.spacing(3, 3),\n display: \"flex\",\n height: \"100%\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: theme.palette.text.secondary,\n opacity: 0.4\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)\", // Green gradient\n background: \"linear-gradient(290deg, #1880e0, #3873d8)\", // blue gradient\n color: \"white\"\n },\n // Descriptions\n descriptionContainer: {\n \"& > div:not(:last-child)\": {\n paddingBottom: theme.spacing(1),\n marginBottom: theme.spacing(1),\n borderBottom: \"1px solid #3f5463\"\n },\n \"& td\": {\n verticalAlign: \"top\",\n padding: theme.spacing(0.5)\n }\n },\n descriptionTitle: {\n fontWeight: theme.typography.fontWeightBold,\n padding: theme.spacing(0.5)\n },\n descriptionName: {\n fontWeight: theme.typography.fontWeightBold\n },\n descriptionPadding: {\n padding: theme.spacing(0.5)\n }\n })\n);\n\nconst parameterDescriptions = [\n {\n name: \"Initial raise\",\n text: \"Total funds raised in the hatch period of the ABC launch\"\n },\n {\n name: \"Allocation to funding pool\",\n text:\n \"The percentage of the funds raised in the Hatch sale that go directly into the project funding pool to compensate future work done in the project\"\n },\n {\n name: \"Hatch price\",\n text:\n \"The price paid per 'ABC token' by community members involved in hatching the project\"\n },\n {\n name: \"Post-hatch price\",\n text:\n \"The price of the 'ABC token' when the curve enters the open phase and is live for public participation\"\n },\n {\n name: \"Exit tribute\",\n text:\n \"The percentage of funds that are diverted to the project funding pool from community members who exit funds from the project by burning 'ABC tokens' in exchange for collateral\"\n }\n];\n\nconst simulationParameterDescriptions = [\n {\n name: \"Price\",\n text: \"Price of the token over time.\"\n },\n {\n name: \"Floor price\",\n text:\n \"Lower bound of the price guaranteed by the vesting of hatch tokens. It decreases over time as more hatch tokens are allowed to be traded\"\n },\n {\n name: \"Total exit tributes\",\n text:\n \"Cumulative sum of exit tributes collected from only exit /sell transactions\"\n }\n];\n\nconst resultParameterDescriptions = [\n {\n name: \"Total reserve\",\n text:\n \"Total DAI in the smart contract reserve at the end of the simulated period\"\n },\n {\n name: \"Funds generated from initial hatch\",\n text:\n \"Fraction of the funds (theta) raised during the hatch that go directly to the cause (analytic result)\"\n },\n {\n name: \"Funds generated from exit tributes\",\n text:\n \"Cumulative sum of exit tributes collected from only exit /sell transactions\"\n },\n {\n name: \"Average slippage\",\n text:\n \"Average of the slippage of each transaction occured during the simulation period\"\n }\n];\n\nexport default function App() {\n const [curveParams, setCurveParams] = useState({\n theta: 0.35, // fraction allocated to reserve (.)\n p0: 0.1, // Hatch sale price p0 (DAI / token)\n p1: 0.3, // Return factor (.)\n wFee: 0.05, // friction coefficient (.)\n d0: 3e6 // Initial raise, d0 (DAI)\n });\n\n const { d0, theta, p0, p1, 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, 250),\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 p1\n });\n\n const [priceTimeseries, setPriceTimeseries] = useState([0]);\n const [withdrawFeeTimeseries, setWithdrawFeeTimeseries] = useState([0]);\n const [floorpriceTimeseries, setFloorpriceTimeseries] = useState([0]);\n const [totalReserve, setTotalReserve] = useState(R0);\n const [withdrawCount, setWithdrawCount] = useState(0);\n const [avgSlippage, setAvgSlippage] = useState(0);\n const [avgTxSize, setAvgTxSize] = useState(0);\n // Simulation state variables\n const [simulationActive, setSimulationActive] = useState(false);\n const [simulationRunning, setSimulationRunning] = useState(false);\n\n useEffect(() => {\n setSimulationActive(false);\n }, [curveParams]);\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\n async function simulateRandomDelta() {\n const R_t: number[] = [R0];\n const S_t: number[] = [S0];\n const p_t: number[] = [getPriceR({ R: R0, V0, k })];\n const wFee_t: number[] = [0];\n const slippage_t: number[] = [];\n const avgTxSize_t: number[] = [];\n\n // hatchers tokens = S0[section added by Z]\n const H_t: number[] = [S0]; // total hatcher tokens not vested\n const floorprice_t: number[] = []; // initially the price is the floor as all tokens are hatcher tokens\n\n // Random walk\n const numSteps = 52;\n const u_min = 0.97;\n const u_max = 1.04;\n const tx_spread = 10;\n // vesting(should this be exposed in the app ?)\n const cliff = 8; // weeks before vesting starts ~2 months\n const halflife = 52; // 26 weeks, half life is ~6 months\n // percentage of the hatch tokens which vest per week(since that is our timescale in the sim)\n\n // numSteps = 52 take 8ms to run\n setSimulationRunning(true);\n for (let t = 0; t < numSteps; t++) {\n const txsWeek = rv_U(5, 2 * t + 5);\n\n const R = getLast(R_t);\n const S = getLast(S_t);\n const H = getLast(H_t);\n\n // enforce the effects of the unvested tokens not being burnable\n let u_lower;\n if (H > S) {\n u_lower = 1;\n } else {\n // compute the reserve if all that supply is burned\n const R_ratio = getR({ S: S - H, V0, k }) / R;\n u_lower = Math.max(1 - R_ratio, u_min);\n }\n const priceGrowth = rv_U(u_lower, u_max);\n\n const deltaR = getDeltaR_priceGrowth({ R, k, priceGrowth });\n const R_next = R + deltaR;\n\n const txs = getTxDistribution({\n sum: deltaR,\n num: txsWeek,\n spread: tx_spread\n });\n // Compute slippage\n const slippage_txs = txs.map(txR =>\n getSlippage({ R, deltaR: txR, V0, k })\n );\n const slippage = getMedian(slippage_txs);\n\n const txsWithdraw = txs.filter(tx => tx < 0);\n const wFees = -wFee * getSum(txsWithdraw);\n // txsWithdraw.reduce((t, c) => t + c, 0);\n\n // Vest\n const delta_H = vest_tokens({ week: t, H, halflife, cliff });\n const H_next = H - delta_H;\n\n // find floor price\n const S_next = getS({ R, V0, k });\n const floorprice_next = getMinPrice({\n S: S_next,\n H: S0 - H_next,\n V0,\n k\n });\n\n const _avgTxSize = getMedian(txsWithdraw);\n\n R_t.push(R_next);\n S_t.push(S_next);\n H_t.push(H_next);\n p_t.push(getPriceR({ R: R_next, V0, k }));\n slippage_t.push(slippage);\n avgTxSize_t.push(_avgTxSize);\n wFee_t.push(getLast(wFee_t) + wFees);\n\n floorprice_t.push(floorprice_next);\n setWithdrawCount(c => c + txsWithdraw.length);\n\n // Stop the simulation if it's no longer active\n if (!simulationActive || !canContinueSimulation) break;\n }\n\n // floorprice_t is missing one data point\n floorprice_t[floorprice_t.length] = floorprice_t[floorprice_t.length - 1];\n\n setPriceTimeseries(p_t);\n setWithdrawFeeTimeseries(wFee_t);\n setFloorpriceTimeseries(floorprice_t);\n setAvgSlippage(getAvg(slippage_t));\n setAvgTxSize(getAvg(avgTxSize_t));\n setTotalReserve(getLast(R_t));\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: `Total reserve`,\n value: (+totalReserve.toPrecision(3)).toLocaleString() + \" DAI\"\n },\n {\n label: `Funds generated from initial hatch`,\n value: Math.round(d0 * theta).toLocaleString() + \" DAI\"\n },\n {\n label: `Funds generated from exit tributes (${withdrawCount} txs)`,\n value:\n (+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() +\n \" DAI\"\n },\n {\n label: `Average slippage (avg tx size ${Math.round(\n avgTxSize\n ).toLocaleString()} DAI)`,\n value: +(100 * avgSlippage).toFixed(3) + \"%\"\n }\n ];\n\n const classes = useStyles();\n\n return (\n <>\n \n \n Parameters description:\n \n
\n | \n | \n \n | \n
\n \n This chart shows a 52 week simulation of discrete\n transactions interacting with the token bonding\n curve. Each transaction adds or substract reserve\n to the system, modifying the price over time. The\n frequency, size and direction of each transaction\n is computed from a set of bounded random\n functions.\n \n
\n\n | \n | \n \n | \n
\n \n Result parameters description:\n \n
\n | \n | \n \n | \n