diff --git a/src/App.tsx b/src/App.tsx index 037cd8e..ee7ac1e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -96,10 +96,79 @@ const useStyles = makeStyles((theme: Theme) => button: { background: "linear-gradient(290deg, #2ad179, #4ab47c)", color: "white" + }, + // Descriptions + descriptionContainer: { + "& > div:not(:last-child)": { + paddingBottom: theme.spacing(1), + marginBottom: theme.spacing(1), + borderBottom: "1px solid #3f5463" + }, + "& td": { + verticalAlign: "top", + padding: theme.spacing(0.5) + } + }, + descriptionTitle: { + fontWeight: theme.typography.fontWeightBold, + padding: theme.spacing(0.5) + }, + descriptionName: { + fontWeight: theme.typography.fontWeightBold } }) ); +const parameterDescriptions = [ + { + name: "Initial raise", + text: "Total funds raised in the hatch period of the ABC launch" + }, + { + name: "Allocation to funding pool", + text: + "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" + }, + { + name: "Hatch price", + text: + "The price paid per 'ABC token' by community members involved in hatching the project" + }, + { + name: "Post-hatch price", + text: + "The price of the 'ABC token' when the curve enters the open phase and is live for public participation" + }, + { + name: "Exit tribute", + text: + "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" + } +]; + +const resultParameterDescriptions = [ + { + name: "Total reserve", + text: + "Total DAI in the smart contract reserve at the end of the simulated period" + }, + { + name: "Funds generated from initial hatch", + text: + "Fraction of the funds (theta) raised during the hatch that go directly to the cause" + }, + { + name: "Funds generated from exit tributes", + text: + "Cumulative amount of exit tributes collected from only exit /sell transactions" + }, + { + name: "Average slippage", + text: + "Average of the slippage of each transaction occured during the simulation period" + } +]; + export default function App() { const [curveParams, setCurveParams] = useState({ d0: 1e6, // Initial raise, d0 (DAI) @@ -241,7 +310,7 @@ export default function App() { value: Math.round(d0 * theta).toLocaleString() + " DAI" }, { - label: `Funds generated from withdraw fees (${withdrawCount} txs)`, + label: `Funds generated from exit tributes (${withdrawCount} txs)`, value: (+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() + " DAI" @@ -271,14 +340,29 @@ export default function App() { Curve Design - Description of the different parameters
- Initial raise: Lorem ipsum
- Allocation to project: Lorem ipsum
- Initial token price: Lorem ipsum
- Return factor: Lorem ipsum
- Withdrawl fee: Lorem ipsum - +
+
+ + Parameters description: + +
+ + + {parameterDescriptions.map(({ name, text }) => ( + + + + + ))} + +
+ + {name} + + + {text} +
+
} /> @@ -294,7 +378,15 @@ export default function App() { Preview Preview of the token bonding curve} + text={ + + Visualization of the token bonding curve analytic function + on a specific range of reserve [0, 4 * R0]. This result is + deterministic given the current set of parameters and will + never change regardes of the campaign performance, it only + shows how the price will react to reserve changes. + + } /> @@ -337,7 +429,16 @@ export default function App() { Simulation Some context about this simulation} + text={ + + This chart shows a 52 week simulation of discrete + transactions interacting with the token bonding curve. + Each transaction adds or substract reserve to the + system, modifying the price over time. The frequency, + size and direction of each transaction is computed + from a set of bounded random functions. + + } /> @@ -358,7 +459,33 @@ export default function App() { Results Explanation of what do this results mean +
+
+ + Result parameters description: + +
+ + + {resultParameterDescriptions.map( + ({ name, text }) => ( + + + + + ) + )} + +
+ + {name} + + + {text} +
+
} /> diff --git a/src/HelpText.tsx b/src/HelpText.tsx index 9220c0b..f5ca96a 100644 --- a/src/HelpText.tsx +++ b/src/HelpText.tsx @@ -1,8 +1,7 @@ import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Popover from "@material-ui/core/Popover"; -import Typography from "@material-ui/core/Typography"; -import Fab from "@material-ui/core/Fab"; +import Box from "@material-ui/core/Box"; import HelpIcon from "@material-ui/icons/HelpOutline"; const useStyles = makeStyles(theme => ({ @@ -17,11 +16,15 @@ const useStyles = makeStyles(theme => ({ opacity: 0.85 } }, - typography: { + popoverContainer: { padding: theme.spacing(2) }, paper: { - backgroundColor: "#384b59" + backgroundColor: "#384b59", + maxWidth: theme.breakpoints.values.md * 0.9, + [`@media screen and (max-width: ${theme.breakpoints.values.md}px)`]: { + maxWidth: "90vw" + } } })); @@ -52,6 +55,7 @@ export default function SimplePopover({ text }: { text: any }) { open={open} anchorEl={anchorEl} onClose={handleClose} + onClick={handleClose} anchorOrigin={{ vertical: "bottom", horizontal: "center" @@ -61,7 +65,7 @@ export default function SimplePopover({ text }: { text: any }) { horizontal: "center" }} > - {text} + {text} ); diff --git a/src/InputParams.tsx b/src/InputParams.tsx index 2e99be7..49d5b90 100644 --- a/src/InputParams.tsx +++ b/src/InputParams.tsx @@ -157,7 +157,7 @@ export default function InputParams({ toNum: (n: string) => Math.floor(parseFloat(n) * 1e6) }, { - label: "Allocation to project", + label: "Allocation to funding pool", value: theta, setter: setTheta, min: 0, @@ -170,7 +170,7 @@ export default function InputParams({ toNum: (n: string) => parseFloat(n) * 1e-2 }, { - label: "Hatch sale price", + label: "Hatch price", value: p0, setter: setP0, min: 0.01, @@ -183,7 +183,7 @@ export default function InputParams({ format: (n: number) => `$${n}` }, { - label: "After hatch price", + label: "Post-hatch price", value: p1, setter: setP1, min: p0 || 0.1, @@ -196,7 +196,7 @@ export default function InputParams({ format: (n: number) => `$${n}` }, { - label: "Withdrawl fee", + label: "Exit tribute", value: wFee, setter: setWFee, min: 0, @@ -282,11 +282,6 @@ export default function InputParams({ max={max} step={step} valueLabelFormat={value => format(value).replace("$", "")} - // marks={[ - // { value: 0, label: "0%" }, - // { value: 50, label: "50%" }, - // { value: 100, label: "100%" } - // ]} /> diff --git a/src/PriceSimulationChart.tsx b/src/PriceSimulationChart.tsx index 3a35bd5..022bac6 100644 --- a/src/PriceSimulationChart.tsx +++ b/src/PriceSimulationChart.tsx @@ -32,7 +32,7 @@ function PriceSimulationChart({ const keyHorizontal = "x"; const keyVerticalLeft = "Price (DAI / token)"; - const keyVerticalRight = "Collected withdraw fee (DAI)"; + const keyVerticalRight = "Total exit tributes (DAI)"; const data = []; for (let t = 0; t < priceTimeseries.length; t++) {