Merge pull request #13 from GriffGreen/patch-3

Update parametersDescriptions.ts

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+node_js:
+  - "10"
+install:
+  - yarn
+script:
+  - yarn run build
+deploy:
+  provider: pages
+  skip-cleanup: true
+  github-token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable
+  keep-history: true
+  local-dir: build
+  on:
+    branch: master

CNAME

@@ -0,0 +1 @@
+abc-demo.commonsstack.org

src/App.tsx

@@ -40,6 +40,8 @@ import {
   getSum
 } from "./math";
 import { throttle } from "lodash";
+// Data
+import { u_min_t, u_max_t } from "./u_values";
 // General styles
 import "./app.css";
 
@@ -166,7 +168,7 @@ export default function App() {
     p0: 0.1, // Hatch sale price p0 (DAI / token)
     p1: 0.3, // Return factor (.)
     wFee: 0.05, // friction coefficient (.)
-    vHalflife: 52, // Vesting half life (weeks)
+    vHalflife: 17, // Vesting half life (weeks)
     d0: 3e6 // Initial raise, d0 (DAI)
   });
 
@@ -258,60 +260,94 @@ export default function App() {
       // numSteps = 52 take 8ms to run
       setSimulationRunning(true);
       for (let t = 0; t < numSteps; t++) {
-        const txsWeek = rv_U(5, 2 * t + 5);
+        const txsWeek = rv_U(100, 40 * t + 100);
 
         const R = getLast(R_t);
         const S = getLast(S_t);
         const H = getLast(H_t);
 
-        // enforce the effects of the unvested tokens not being burnable
+        let R_next: number = 0,
-        let u_lower;
+          S_next: number = 0,
-        if (H > S) {
+          H_next: number = 0,
-          u_lower = 1;
+          price_next: number = 0,
-        } else {
+          txsWithdraw: number[] = [0],
-          // compute the reserve if all that supply is burned
+          floorprice_next: number = 1,
-          const R_ratio = getR({ S: S - H, V0, k }) / R;
+          slippage: number = 0;
-          u_lower = Math.max(1 - R_ratio, u_min);
+        // Run the value compution again if the price goes below the floor price
+
+        /**
+         * Since the values u_min and u_max are predefined, it's possible that
+         * the price becomes less than the floor price. This cannot happen.
+         * So the next loop has 10 opportunities to find a price greater than
+         * the floor price. The for loop is used to prevent a possible infinite
+         * loop if a `while` loop was used.
+         */
+        for (let i = 0; i < 20 && price_next < floorprice_next * 1.05; i++) {
+          // enforce the effects of the unvested tokens not being burnable
+          let u_lower: number, u_upper: number;
+          // if (H > S) {
+          //   u_lower = 1;
+          // } else {
+          //   // compute the reserve if all that supply is burned
+          //   const R_ratio = getR({ S: S - H, V0, k }) / R;
+          //   u_lower = Math.max(1 - R_ratio, u_min);
+          // }
+          // let priceGrowth = rv_U(u_lower, u_max);
+
+          u_lower = u_min_t[t];
+          u_upper = u_max_t[t];
+
+          if (i > 15) {
+            u_lower = 1.02;
+            u_upper = u_upper + 1.04;
+          }
+
+          const priceGrowth = rv_U(u_lower, u_upper);
+
+          const deltaR = getDeltaR_priceGrowth({ R, k, priceGrowth });
+          R_next = R + deltaR;
+
+          const txs = getTxDistribution({
+            sum: deltaR,
+            num: txsWeek,
+            spread: tx_spread
+          });
+          // Compute slippage
+          const slippage_txs = txs.map(txR =>
+            getSlippage({ R, deltaR: txR, V0, k })
+          );
+          slippage = getMedian(slippage_txs);
+
+          txsWithdraw = txs.filter(tx => tx < 0);
+
+          // Vest
+          const delta_H = vest_tokens({
+            week: t,
+            H,
+            halflife: vHalflife,
+            cliff
+          });
+          H_next = H - delta_H;
+
+          // find floor price
+          S_next = getS({ R, V0, k });
+          floorprice_next = getMinPrice({
+            S: S_next,
+            H: S_next - H_next,
+            V0,
+            k
+          });
+
+          price_next = getPriceR({ R: R_next, V0, k });
         }
-        const priceGrowth = rv_U(u_lower, u_max);
-
-        const deltaR = getDeltaR_priceGrowth({ R, k, priceGrowth });
-        const R_next = R + deltaR;
-
-        const txs = getTxDistribution({
-          sum: deltaR,
-          num: txsWeek,
-          spread: tx_spread
-        });
-        // Compute slippage
-        const slippage_txs = txs.map(txR =>
-          getSlippage({ R, deltaR: txR, V0, k })
-        );
-        const slippage = getMedian(slippage_txs);
-
-        const txsWithdraw = txs.filter(tx => tx < 0);
-        const wFees = -wFee * getSum(txsWithdraw);
-        //  txsWithdraw.reduce((t, c) => t + c, 0);
-
-        // Vest
-        const delta_H = vest_tokens({ week: t, H, halflife: vHalflife, cliff });
-        const H_next = H - delta_H;
-
-        // find floor price
-        const S_next = getS({ R, V0, k });
-        const floorprice_next = getMinPrice({
-          S: S_next,
-          H: S_next - H_next,
-          V0,
-          k
-        });
 
         const _avgTxSize = getMedian(txsWithdraw);
+        const wFees = -wFee * getSum(txsWithdraw);
 
         R_t.push(R_next);
         S_t.push(S_next);
         H_t.push(H_next);
-        p_t.push(getPriceR({ R: R_next, V0, k }));
+        p_t.push(price_next);
         slippage_t.push(slippage);
         avgTxSize_t.push(_avgTxSize);
         wFee_t.push(getLast(wFee_t) + wFees);
@@ -349,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/CurveDesignInputParams.tsx

@@ -10,11 +10,11 @@ export default function CurveDesignInputParams({
   curveParams: CurveParamsInterface;
   setCurveParams(newCurveParams: any): void;
 }) {
-  const [theta, setTheta] = useState(0.35); // fraction allocated to reserve (.)
+  const [theta, setTheta] = useState(curveParams.theta); // fraction allocated to reserve (.)
-  const [p0, setP0] = useState(0.1); // Hatch sale Price p0 (DAI / token)
+  const [p0, setP0] = useState(curveParams.p0); // Hatch sale Price p0 (DAI / token)
-  const [p1, setP1] = useState(0.3); // Return factor (.)
+  const [p1, setP1] = useState(curveParams.p1); // Return factor (.)
-  const [wFee, setWFee] = useState(0.05); // friction coefficient (.)
+  const [wFee, setWFee] = useState(curveParams.wFee); // friction coefficient (.)
-  const [vHalflife, setVHalflife] = useState(52); // friction coefficient (.)
+  const [vHalflife, setVHalflife] = useState(curveParams.vHalflife); // friction coefficient (.)
 
   useEffect(() => {
     setTheta(curveParams.theta);
@@ -24,9 +24,12 @@ export default function CurveDesignInputParams({
     setVHalflife(curveParams.vHalflife);
   }, [curveParams]);
 
+  const maxReturnRate = 10;
+  const minP1P0Rate = 1.5;
+
   function _setP0(newP0: number) {
     setP0(newP0);
-    if (p1 < newP0) setP1(newP0);
+    if (p1 < newP0 * minP1P0Rate) setP1(newP0 * minP1P0Rate);
     else if (p1 > newP0 * maxReturnRate) setP1(newP0 * maxReturnRate);
   }
 
@@ -41,8 +44,6 @@ export default function CurveDesignInputParams({
     }));
   }
 
-  const maxReturnRate = 10;
-
   const inputFields: InputFieldInterface[] = [
     {
       label: parameterDescriptions.theta.name,
@@ -74,7 +75,7 @@ export default function CurveDesignInputParams({
       description: parameterDescriptions.p1.text,
       value: p1,
       setter: setP1,
-      min: p0 || 0.1,
+      min: Number((minP1P0Rate * (p0 || 0.1)).toFixed(2)),
       max: Number((maxReturnRate * p0).toFixed(2)),
       step: 0.01,
       toText: (n: number) => String(+n.toFixed(2)),

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's Augmented Bonding Curve component.
+        Change the Hatch variables to explore what continuous funding streams 
+        can do for your community.
       </Typography>
       <Typography className={classes.subsubtitle}>
-        A narrative showcase of <Link href={cadCadLink}>cadCAD</Link>
+        Read more about the Augmented Bonding Curve{" "}
-        's capabilities
+        <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/SupplyVsDemandChart.tsx

@@ -7,6 +7,8 @@ import {
   CartesianGrid,
   Legend,
   ReferenceLine,
+  ReferenceDot,
+  ReferenceArea,
   ResponsiveContainer,
   Tooltip
 } from "recharts";
@@ -19,6 +21,10 @@ const isAnimationActive = false;
 const keyHorizontal = "x";
 const keyVertical = "Supply (tokens) / Collateral (DAI)";
 
+// Do to transparency and color merging issues
+// these colors are handpicked to look the closest to the theme colors
+const referenceLineColor = "#b7c1cb";
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     tooltip: {
@@ -100,12 +106,12 @@ function SupplyVsDemandChart({
     const { textAnchor, viewBox } = props;
     return (
       <text
-        x={viewBox.x + 10}
+        x={viewBox.x + viewBox.width / 4 + 10}
-        y={30}
+        y={viewBox.y + 20}
-        fill={theme.palette.text.secondary}
+        fill={referenceLineColor}
         textAnchor={textAnchor}
       >
-        Initial value
+        Initial Token Supply
       </text>
     );
   }
@@ -183,12 +189,22 @@ function SupplyVsDemandChart({
           fillOpacity={0.3}
           strokeWidth={2}
         />
+        {/* Necessary because ReferenceDot types do not allow "label" k */}
         <ReferenceLine
           x={R0_round}
-          stroke={theme.palette.primary.main}
+          y={f(R0_round)}
+          stroke={"transparent"}
           strokeDasharray="9 0"
           label={<ReferenceLabel />}
         />
+        <ReferenceDot
+          x={R0_round}
+          y={f(R0_round)}
+          r={6}
+          fill={theme.palette.primary.main}
+          stroke={2}
+        />
+
         <Legend formatter={renderColorfulLegendText} />
       </AreaChart>
     </ResponsiveContainer>

src/parametersDescriptions.ts

@@ -4,40 +4,40 @@ export interface DescriptionObject {
 
 export const parameterDescriptions: DescriptionObject = {
   theta: {
-    name: "Hatch Raise % to funding pool",
+    name: "Hatch Tribute",
     text:
-      "The percentage of the funds raised in the Hatch going directly to funding pool to be used to support the Commons, the rest goes to the collateral pool"
+      "The percentage of the funds raised during the Hatch that goes directly to Funding Pool to be used to support the Commons' mission, the rest goes to the collateral pool"
   },
   p0: {
     name: "Hatch price",
-    text: "The price paid per token by when hatching the project"
+    text: "The price paid per token by when hatching the Commons"
   },
   p1: {
     name: "Post-Hatch price",
     text:
-      "The price per token after the Hatch ends, the curve is set, and anyone can interact with the bonding curve"
+      "The price per token at the launch of the Commons when the curve is set and anyone can join with the Commons"
   },
   wFee: {
-    name: "Exit tribute",
+    name: "Exit Tribute",
     text:
-      "The percentage that goes to the funding pool when token holders 'sell' by burning their token at the price determined by the bonding curve"
+      "The percentage that goes to the Funding Pool when token holders 'sell' by burning their token at the price determined by the ABC. If the Exit Tribute is 10% and the price is 1 DAI/token then, for every token burned, the exiting token holder would get 0.9 Dai and the Funding Pool would get 0.1 Dai"
   },
   vHalflife: {
-    name: "Vesting half-life",
+    name: "Vesting Curve",
     text:
-      "Tokens that are purchased during the Hatch are locked for 8 weeks and then released slowly such that 50% of the tokens will be able to be sold after this many weeks and 87.5% of the tokens after 3x this many weeks"
+      "Tokens that are purchased during the Hatch are locked initially and then released slowly such that 50% of the tokens will be able to be sold after the locking period + this many weeks and 87.5% of the tokens after 3x this many weeks + the locking period. In this demo the locking period is 7 weeks"
   },
   d0: {
     name: "Hatch Raise",
-    text: "Amount of funds contributed during the hatch period"
+    text: "Amount of funds initially contributed before the launch of the Commons, this variable helps shape the curve"
   }
 };
 
 export const supplyVsDemandChartDescription =
-  "Visualization of the bonding curve up to 4x the initial size of the Collateral Pool Post-Hatch. This result is deterministic given the curve parameters and the Hatch raise. It will never change regardless of the campaign's performance, it simply shows how the price will react to changes in the Collateral Pool.";
+  "Visualization of the bonding curve up to 4x the initial size of the Collateral Pool Post-Hatch. This result is deterministic given the parameters set. It will not change regardless of the campaign's performance, it simply shows how the price will react to changes in the Collateral Pool.";
 
 export const simulationChartDescription =
-  "This chart shows a 52 week simulation of discrete transactions interacting with the Augmented Bonding Curve. Each transaction adds to or subtracts reserve from the system, modifying the price over time. The frequency, size and direction of each transaction is computed from a set of bounded random functions. This is a NOT a cadCAD simulation, but it showcases the intention behind cadCAD.";
+  "This chart shows a 52 week simulation of discrete transactions interacting with the Augmented Bonding Curve. Each transaction adds to or subtracts collateral from the system, modifying the price over time. The frequency, size and direction of each transaction is computed from a set of bounded random functions. This is a NOT a cadCAD simulation, but it showcases the intention behind cadCAD.";
 
 export const simulationParameterDescriptions: DescriptionObject = {
   price: {
@@ -45,9 +45,9 @@ export const simulationParameterDescriptions: DescriptionObject = {
     text: "Price of the token over time."
   },
   floorPrice: {
-    name: "Floor price",
+    name: "Vesting Curve",
     text:
-      "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"
+      "Lower bound of the price guaranteed by the Vesting Curve. It decreases over time as the tokens received by Hatchers are unlocked"
   },
   totalRaised: {
     name: "Total funds raised",
@@ -57,21 +57,25 @@ export const simulationParameterDescriptions: DescriptionObject = {
 
 export const resultParameterDescriptions: DescriptionObject = {
   totalReserve: {
-    name: "Collateral pool balance",
+    name: "Collateral Pool balance",
-    text: "Total DAI in the collateral pool at the end of the simulated period"
+    text: "Total Dai in the collateral pool at the end of the simulated period"
-  },
-  initialHatchFunds: {
-    name: "Funds generated from Raise Hatch",
-    text: "Funds raised during the Hatch that go directly to the cause"
-  },
-  exitTributes: {
-    name: "Funds generated from exit tributes",
-    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"
+      "Median of change in price a user experiences from the current price of one token to the price actually received when minting or burning many tokens"
+  },
+  initialHatchFunds: {
+    name: "Funds generated from Hatch Tribute",
+    text: "Funds raised during the Hatch that go directly to the Funding Pool"
+  },
+  exitTributes: {
+    name: "Funds generated from Exit Tributes",
+    text:
+      "Cumulative sum of Exit Tributes collected from tokens that are burned"
+  },
+  totalRaised: {
+    name: "Total funds raised for your community",
+    text: "Sum of funds from the Hatch Tribute + funds from Exit Tributes"
   }
 };

src/u_values.tsx

@@ -0,0 +1,114 @@
+const low_u = 0.97;
+const high_u = 1.07;
+const dump = 0.75;
+
+export const u_min_t = [
+  1,
+  0.8,
+  0.8,
+  0.9,
+  0.9,
+  0.8,
+  0.6,
+  0.5,
+  0.8,
+  0.9,
+  0.9,
+  low_u,
+  low_u,
+  low_u,
+  0.8,
+  low_u,
+  low_u,
+  low_u,
+  dump,
+  low_u,
+  low_u,
+  low_u,
+  dump,
+  low_u,
+  low_u,
+  low_u,
+  dump,
+  low_u,
+  low_u,
+  low_u,
+  dump,
+  low_u,
+  low_u,
+  low_u,
+  dump,
+  low_u,
+  low_u,
+  low_u,
+  dump,
+  low_u,
+  low_u,
+  low_u,
+  low_u,
+  low_u,
+  low_u,
+  dump,
+  low_u,
+  low_u,
+  low_u,
+  low_u,
+  low_u,
+  0.97
+];
+
+export const u_max_t = [
+  3,
+  1.5,
+  1.01,
+  1.04,
+  1.1,
+  1.15,
+  1.15,
+  1.15,
+  1.1,
+  1.1,
+  1.2,
+  1.15,
+  high_u,
+  high_u,
+  1.3,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  1.3,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  1.2,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  1.4,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  high_u,
+  1.04
+];

yarn.lock

@@ -3831,16 +3831,16 @@ eslint-scope@^5.0.0:
     estraverse "^4.1.1"
 
 eslint-utils@^1.3.1:
-  version "1.4.0"
+  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
-  integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
   dependencies:
-    eslint-visitor-keys "^1.0.0"
+    eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.0.0:
+eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
-  version "1.0.0"
+  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
-  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
+  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
 eslint@^6.1.0:
   version "6.1.0"