Apply Jeff's review

src/App.tsx

@@ -385,30 +385,38 @@ export default function App() {
     x => x + initialHatchFunds
   );
 
+  const totalInitialHatchFunds = Math.round(d0 * theta);
+  const totalExitTributes = Math.round(getLast(withdrawFeeTimeseries));
+  const totalFunds = totalInitialHatchFunds + totalExitTributes;
+  const formatFunds = (n: number) => (+n.toPrecision(3)).toLocaleString();
+
   const resultFields = [
     {
       label: resultParameterDescriptions.totalReserve.name,
       description: resultParameterDescriptions.totalReserve.text,
       value: (+totalReserve.toPrecision(3)).toLocaleString() + " DAI"
     },
-    {
-      label: resultParameterDescriptions.initialHatchFunds.name,
-      description: resultParameterDescriptions.initialHatchFunds.text,
-      value: Math.round(d0 * theta).toLocaleString() + " DAI"
-    },
-    {
-      label: resultParameterDescriptions.exitTributes.name,
-      description: resultParameterDescriptions.exitTributes.text,
-      value:
-        (+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() +
-        " DAI",
-      valueFooter: `From ${withdrawCount} exit txs`
-    },
     {
       label: resultParameterDescriptions.slippage.name,
       description: resultParameterDescriptions.slippage.text,
       value: +(100 * avgSlippage).toFixed(3) + " %",
       valueFooter: `Avg tx size ${Math.round(avgTxSize).toLocaleString()} DAI`
+    },
+    {
+      label: resultParameterDescriptions.initialHatchFunds.name,
+      description: resultParameterDescriptions.initialHatchFunds.text,
+      value: formatFunds(totalInitialHatchFunds) + " DAI"
+    },
+    {
+      label: resultParameterDescriptions.exitTributes.name,
+      description: resultParameterDescriptions.exitTributes.text,
+      value: formatFunds(totalExitTributes) + " DAI",
+      valueFooter: `From ${withdrawCount} exit txs`
+    },
+    {
+      label: resultParameterDescriptions.totalRaised.name,
+      description: resultParameterDescriptions.totalRaised.text,
+      value: formatFunds(totalFunds) + " DAI"
     }
   ];
 

src/Header.tsx

@@ -4,20 +4,27 @@ import Link from "@material-ui/core/Link";
 import Typography from "@material-ui/core/Typography";
 
 const cadCadLink =
-  "https://medium.com/block-science/cadcad-filling-a-critical-gap-in-open-source-data-science-fcd0d3faa8ed";
+  "https://medium.com/giveth/deep-dive-augmented-bonding-curves-3f1f7c1fa751";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
     title: {
       // color: theme.palette.text.secondary,
     },
     subtitle: {
       color: theme.palette.text.secondary,
-      margin: theme.spacing(3, 0, 0)
+      margin: theme.spacing(3, 0, 0),
+      maxWidth: theme.spacing(82)
     },
     subsubtitle: {
       color: theme.palette.text.secondary,
-      opacity: 0.6
+      opacity: 0.6,
+      maxWidth: theme.spacing(74)
     },
     lightBulb: {
       verticalAlign: "middle",
@@ -47,7 +54,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function Header() {
   const classes = useStyles();
   return (
-    <>
+    <div className={classes.container}>
       <div className={classes.logoContainer}>
         <img src="./favicon.ico" className={classes.logo} alt="logo" />
         <Typography className={classes.logoText}>Commons Stack</Typography>
@@ -58,12 +65,16 @@ export default function Header() {
       </Typography>
 
       <Typography className={classes.subtitle}>
-        Experiment and test augmented bonding curves
+        Experiment with the Commons Stack Augmented Bonding Curve component.
+        Customize the hatch variables and explore the continuous funding results
+        for your community.
       </Typography>
       <Typography className={classes.subsubtitle}>
-        A narrative showcase of <Link href={cadCadLink}>cadCAD</Link>
-        's capabilities
+        Read more about the Augmented Bonding Curve{" "}
+        <Link href={cadCadLink}>here</Link>. Note that this is a demo for
+        illustration purposes only, a narrative showcase of cadCAD's
+        capabilities.
       </Typography>
-    </>
+    </div>
   );
 }

src/parametersDescriptions.ts

@@ -60,6 +60,11 @@ export const resultParameterDescriptions: DescriptionObject = {
     name: "Collateral pool balance",
     text: "Total DAI in the collateral pool at the end of the simulated period"
   },
+  slippage: {
+    name: "Median slippage",
+    text:
+      "Median of change in price a user experiences from the current price to the price received for exiting/selling/burning"
+  },
   initialHatchFunds: {
     name: "Funds generated from Raise Hatch",
     text: "Funds raised during the Hatch that go directly to the cause"
@@ -69,9 +74,8 @@ export const resultParameterDescriptions: DescriptionObject = {
     text:
       "Cumulative sum of exit tributes collected from only exit / sell / burn transactions"
   },
-  slippage: {
-    name: "Median slippage",
-    text:
-      "Median of change in price a user experiences from the current price to the price received for exiting/selling/burning"
+  totalRaised: {
+    name: "Total funds raised for your community",
+    text: "Sum of funds from Raise Hatch + funds from exit tributes"
   }
 };