Merge pull request #241 from CommonsBuild/develop

ABC Updates

Author: pkretzschmar

public/icons/arrow_in.svg

@@ -11,7 +11,7 @@ const textColors = {
 type TextColor = 'neon' | 'white';
 interface InfoBoxProps {
   color?: TextColor;
-  label: string;
+  label: string | React.ReactNode;
   link?: string;
   tooltipText?: string | React.ReactNode;
 }
@@ -23,12 +23,12 @@ function InfoBox({ color = 'white', label, link, tooltipText }: InfoBoxProps) {
     <Tooltip isHovered={questionIsHovered} text={tooltipText}>
       <div
         ref={questionRef}
-        className="grid grid-flow-col gap-2 justify-between items-center p-3 bg-black-200"
+        className="grid grid-flow-col gap-2 justify-between items-center px-4 py-2 bg-black-200"
       >
         <a href={link} target="_blank" rel="noreferrer">
           <span
             className={classnames(
-              'font-bj font-bold text-xs cursor-pointer',
+              'font-bj font-bold text-sm cursor-pointer flex',
               textColors[color]
             )}
           >

public/icons/arrow_out.svg

@@ -74,7 +74,7 @@ function SubmitAnalysis({ params, submitParams, submitProposal }) {
             className="font-bj text-2xl text-neon-light p-6"
             id="tokenFreezeThaw"
           >
-            Token Freeze & Token Thaw
+            Token Freeze & Token Thaw
           </h3>
           <TokenFreezeThawChart
             price={chart.tokensReleased}
@@ -99,7 +99,7 @@ function SubmitAnalysis({ params, submitParams, submitProposal }) {
             <MilestoneTable data={milestoneTable} />
           </div>
           <div className="mt-12">
-            <ABCTable table={{ ...ABCTableData }} showStepZero={false} />
+            <ABCTable table={{ ...ABCTableData }} />
           </div>
         </AnalysisContainer>
         <AnalysisContainer onVisible={() => setInFocus(3)}>

src/components/InfoBox.tsx

@@ -302,7 +302,7 @@ const SubmitSummary = ({
       )}
       <SummaryContainer
         inputList={freezeThawInputs}
-        title="token freeze & token thaw"
+        title="token freeze &amp; token thaw"
         onChange={handleChange}
         textAreaName="tokenFreezeStrategy"
         textAreaValue={params.tokenFreezeStrategy}

src/components/SubmitAnalysis.tsx

@@ -16,7 +16,7 @@ function RadioButton({
   value,
 }: RadioButtonProps) {
   return (
-    <p className="mx-4">
+    <p className="mx-2">
       <input
         id={id}
         type="radio"

src/components/SubmitSummary.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Image from 'next/image';
 import { Line } from 'react-chartjs-2';
 import ChartAxisLabel from './ChartAxisLabel';
+import ChartGrid from '../ChartGrid';
 
 interface ConvictionGrowthProps {
   convictionPercentage: number[];
@@ -85,17 +85,23 @@ function ConvictionGrowthChart({
       <div className="w-20 h-0 text-right relative -top-12 -left-2">
         <ChartAxisLabel label="% of maximum conviction" />
       </div>
-      <div className="flex justify-center py-2">
+      <ChartGrid
+        id="q"
+        chart={<Line data={data} options={options} />}
+        xAxisLabel={<ChartAxisLabel label="days" />}
+        yAxisLabel={<></>}
+      />
+      {/* <div className="flex justify-center py-2">
         <div className="w-full">
-          <Line data={data} options={options} />
           <div className="relative h-3/5 abc-chart">
             <Image layout="fill" src="/chart_bg.png" />
           </div>
+          <Line data={data} options={options} />
         </div>
-      </div>
-      <div className="w-24 h-0 ml-auto text-right relative bottom-2">
+      </div> */}
+      {/* <div className="w-24 h-0 ml-auto text-right relative bottom-2">
         <ChartAxisLabel label="days" />
-      </div>
+      </div> */}
     </>
   );
 }

src/components/btns/RadioButton.tsx

@@ -99,7 +99,7 @@ const TokenFreezeThawChart = ({
           }
           rotate
           tooltipPosition="left"
-          tooltipText="The price floor is the minimum possible price of the token. This is a result of tokens being frozen and is affected by the paramaters Token Freeze & Token Thaw."
+          tooltipText="The price floor is the minimum possible price of the token. This is a result of tokens being frozen and is affected by the parameters Token Freeze & Token Thaw."
         />
       }
     />

src/components/charts/ConvictionGrowth.tsx

@@ -34,7 +34,24 @@ function ABCAddStepDialog({
   };
 
   return (
-    <Modal handleClose={handleClose as () => void} isOpen={isOpen} transparent>
+    <Modal
+      handleClose={handleClose as () => void}
+      isOpen={isOpen}
+      transparent
+      customButton={
+        <button
+          className="h-14 px-6 mx-auto bg-neon outline-none	hover:bg-neon-light-600 disabled:opacity-50 disabled:bg-gray-400 disabled:text-gray-300 w-full"
+          onClick={(e) => {
+            onClick([Number(stepData.value), stepData.type], 'stepList');
+            handleClose(e);
+          }}
+        >
+          <span className="font-bj font-bold text-lg uppercase cursor-pointer">
+            simulate a transaction
+          </span>
+        </button>
+      }
+    >
       <div className="bg-black">
         <div className="bg-black-200 px-8 py-6">
           <span className="block font-bj font-bold text-xs text-neon-light uppercase pb-2">
@@ -83,17 +100,6 @@ function ABCAddStepDialog({
               </span>
             </div>
           </div>
-          <a
-            className="flex justify-center border border-neon my-3"
-            onClick={(e) => {
-              onClick([Number(stepData.value), stepData.type], 'stepList');
-              handleClose(e);
-            }}
-          >
-            <span className="font-bj font-bold text-xs text-neon uppercase p-2 py-3">
-              add a step
-            </span>
-          </a>
         </div>
       </div>
     </Modal>

src/components/charts/TokenFreezeThaw.tsx

@@ -13,25 +13,16 @@ function ABCScenarioDialog({ handleClose, isOpen }: ABCScenarioDialogProps) {
       title="How to use the ABC Simulator"
     >
       <p className="font-inter text-lg text-neon-light text-center p-4">
-        Use the ABC simulator to see how your configurations react to simulated
-        market environments. Get started by doing the following:
-        <ul className="list-inside list-disc font-inter">
-          <li className="py-5">
-            <b>Choose a Market Scenario,</b> either <i>Bullish</i> or
-            <i>Bearish</i>. This will modify the 3 initial steps implemented to
-            begin your economy’s story.
-          </li>
-          <li className="py-5">
-            <b>Select a Reserve Balance.</b> This defines where your steps begin
-            and the range of your X-axis. Clicking LAUNCH will use the amount of
-            Hatch funds raised with your Commons Tribute setting.
-          </li>
-          <li className="py-5">
-            <b>Add a Step,</b> to place a buy or sell transaction on your ABC.
-            This will create a new step on your curve. Take note of the 3 steps
-            already generated by your Market Scenario.
-          </li>
-        </ul>
+        Watch the graph and the table below the graph to see how your
+        configuration reacts to transactions. Note that Transaction 0 is the
+        initial buy that mints tokens for the Commons itself, and the following
+        3 transactions are generated automatically.
+      </p>
+      <p className="font-inter text-lg text-neon-light text-center p-4">
+        Click the &quot;Simulate a Transaction&quot; button, to place a buy or
+        sell transaction on your ABC configuration. This will add a new
+        transaction on the table and the graph. Take note that you can use large
+        transactions to explore the full range of the ABC.
       </p>
     </Modal>
   );