diff --git a/src/App.tsx b/src/App.tsx
index 381b5ea..ca18452 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -44,6 +44,7 @@ import { throttle } from "lodash";
import "./app.css";
const headerOffset = 10;
+const simulationDuration = 4000;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -341,20 +342,18 @@ export default function App() {
value: Math.round(d0 * theta).toLocaleString() + " DAI"
},
{
- label: `${
- resultParameterDescriptions.exitTributes.name
- } (${withdrawCount} txs)`,
+ label: resultParameterDescriptions.exitTributes.name,
description: resultParameterDescriptions.exitTributes.text,
value:
(+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() +
- " DAI"
+ ` DAI (${withdrawCount} txs)`
},
{
- label: `${
- resultParameterDescriptions.slippage.name
- } (avg tx size ${Math.round(avgTxSize).toLocaleString()} DAI)`,
+ label: resultParameterDescriptions.slippage.name,
description: resultParameterDescriptions.slippage.text,
- value: +(100 * avgSlippage).toFixed(3) + "%"
+ value:
+ +(100 * avgSlippage).toFixed(3) +
+ ` % (avg tx size ${Math.round(avgTxSize).toLocaleString()} DAI)`
}
];
@@ -521,6 +520,7 @@ export default function App() {
priceTimeseries={priceTimeseries}
floorpriceTimeseries={floorpriceTimeseries}
totalFundsRaisedTimeseries={totalFundsRaisedTimeseries}
+ simulationDuration={simulationDuration}
p0={p0}
p1={p1}
/>
@@ -566,7 +566,10 @@ export default function App() {
-
+
diff --git a/src/DotsLoader.tsx b/src/DotsLoader.tsx
new file mode 100644
index 0000000..125d6ff
--- /dev/null
+++ b/src/DotsLoader.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import "./dotsLoader.css";
+
+export default function DotsLoader() {
+ return (
+
+ );
+}
diff --git a/src/PriceSimulationChart.tsx b/src/PriceSimulationChart.tsx
index 8cbbc06..c043bb7 100644
--- a/src/PriceSimulationChart.tsx
+++ b/src/PriceSimulationChart.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
import {
AreaChart,
Area,
@@ -34,12 +34,14 @@ function PriceSimulationChart({
priceTimeseries,
totalFundsRaisedTimeseries,
floorpriceTimeseries,
+ simulationDuration,
p0,
p1
}: {
priceTimeseries: number[];
totalFundsRaisedTimeseries: number[];
floorpriceTimeseries: number[];
+ simulationDuration: number;
p0: number;
p1: number;
}) {
@@ -59,6 +61,21 @@ function PriceSimulationChart({
});
}
+ /**
+ * When resizing the window the chart animation looks very bad
+ * Keep the animation active only during the initial animation time,
+ * but afterwards, deactivate to prevent the re-size ugly effect
+ */
+ const [isAnimationActive, setIsAnimationActive] = useState(true);
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ setIsAnimationActive(false);
+ }, simulationDuration + 100);
+ return () => {
+ clearTimeout(timeout);
+ };
+ });
+
// Chart components
const theme: any = useTheme();
@@ -171,7 +188,8 @@ function PriceSimulationChart({
} />
createStyles({
@@ -42,14 +43,31 @@ const useStyles = makeStyles((theme: Theme) =>
);
export default function ResultParams({
- resultFields
+ resultFields,
+ simulationDuration
}: {
resultFields: {
label: string;
description: string;
value: number | string;
}[];
+ simulationDuration: number;
}) {
+ /**
+ * When resizing the window the chart animation looks very bad
+ * Keep the animation active only during the initial animation time,
+ * but afterwards, deactivate to prevent the re-size ugly effect
+ */
+ const [isAnimationActive, setIsAnimationActive] = useState(true);
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ setIsAnimationActive(false);
+ }, simulationDuration);
+ return () => {
+ clearTimeout(timeout);
+ };
+ });
+
const classes = useStyles();
return (
@@ -61,7 +79,11 @@ export default function ResultParams({
- {value}
+ {isAnimationActive ? (
+
+ ) : (
+ {value}
+ )}
))}
diff --git a/src/SupplyVsDemandChart.tsx b/src/SupplyVsDemandChart.tsx
index 85e3d1b..d64b846 100644
--- a/src/SupplyVsDemandChart.tsx
+++ b/src/SupplyVsDemandChart.tsx
@@ -15,6 +15,7 @@ import { getLinspaceTicks } from "./utils";
import { getInitialParams, getPriceR } from "./math";
import { useTheme } from "@material-ui/styles";
+const isAnimationActive = false;
const keyHorizontal = "x";
const keyVertical = "Supply (tokens) / Reserve (DAI)";
@@ -181,7 +182,7 @@ function SupplyVsDemandChart({
/>
} />
div {
+ width: 10px;
+ height: 10px;
+ margin-right: 4px;
+ background-color: #9aa3ad;
+ border-radius: 100%;
+ display: inline-block;
+ -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+ animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+ -webkit-animation-delay: -0.32s;
+ animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+ -webkit-animation-delay: -0.16s;
+ animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+ 0%,
+ 80%,
+ 100% {
+ -webkit-transform: scale(0);
+ }
+ 40% {
+ -webkit-transform: scale(1);
+ }
+}
+
+@keyframes sk-bouncedelay {
+ 0%,
+ 80%,
+ 100% {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ }
+ 40% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}