From 7d8c579290f65258e7a16379a80c5caab9981d78 Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Wed, 10 Mar 2021 14:48:17 +0100
Subject: [PATCH 01/10] Remove the progress bar

Remove the progress bar that displays how many KEEP tokens in available.
---
 .../dashboard/src/components/DelegateStakeForm.jsx    | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/solidity/dashboard/src/components/DelegateStakeForm.jsx b/solidity/dashboard/src/components/DelegateStakeForm.jsx
index 937903195c..98aaad1c72 100644
--- a/solidity/dashboard/src/components/DelegateStakeForm.jsx
+++ b/solidity/dashboard/src/components/DelegateStakeForm.jsx
@@ -131,17 +131,6 @@ const TokensAmountField = ({
             <MaxAmountAddon onClick={onAddonClick} text="Max Stake" />
           }
         />
-        <ProgressBar
-          total={availableToStake}
-          value={stakeTokensValue}
-          color={colors.mint80}
-          bgColor={colors.mint20}
-        >
-          <ProgressBar.Inline
-            height={10}
-            className="token-amount__progress-bar"
-          />
-        </ProgressBar>
         <div className="text-caption text-grey-60 text-right ml-a">
           {displayAmount(availableToStake)} KEEP available
         </div>

From 01a576461fd94e8c88ce7f5b6824df98db7c2668 Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Thu, 11 Mar 2021 10:39:04 +0100
Subject: [PATCH 02/10] Available to stake label style

Changing style of "available to stake" label based on Figma.
---
 solidity/dashboard/src/components/DelegateStakeForm.jsx | 4 ++--
 solidity/dashboard/src/css/typography.less              | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/solidity/dashboard/src/components/DelegateStakeForm.jsx b/solidity/dashboard/src/components/DelegateStakeForm.jsx
index 98aaad1c72..f861f6e984 100644
--- a/solidity/dashboard/src/components/DelegateStakeForm.jsx
+++ b/solidity/dashboard/src/components/DelegateStakeForm.jsx
@@ -131,8 +131,8 @@ const TokensAmountField = ({
             <MaxAmountAddon onClick={onAddonClick} text="Max Stake" />
           }
         />
-        <div className="text-caption text-grey-60 text-right ml-a">
-          {displayAmount(availableToStake)} KEEP available
+        <div className="text-caption--green-theme text-right ml-a">
+          {displayAmount(availableToStake)} available to stake
         </div>
       </div>
     </div>
diff --git a/solidity/dashboard/src/css/typography.less b/solidity/dashboard/src/css/typography.less
index 2e820faf8a..30fa83b1af 100644
--- a/solidity/dashboard/src/css/typography.less
+++ b/solidity/dashboard/src/css/typography.less
@@ -224,6 +224,13 @@ label, .text-label {
     font-size: 0.5rem;
     line-height: 0.75rem;
     letter-spacing: 0.05rem;
+
+    &--green-theme {
+      color: @color-green;
+      font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 1.1rem;
+    }
   }
 
   &-instruction {

From c3740192590dae04e9ea40851764528400ebaf42 Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Thu, 11 Mar 2021 10:58:55 +0100
Subject: [PATCH 03/10] Style MIN STAKE info label

Add new style to MIN STAKE info label and change the class/prop name
instruction-text => additional-info-text.
---
 .../dashboard/src/components/DelegateStakeForm.jsx  |  4 +---
 solidity/dashboard/src/components/FormInput.jsx     |  8 ++++----
 solidity/dashboard/src/css/delegate-stake-form.less |  4 ++--
 solidity/dashboard/src/css/forms.less               | 13 +++++++++----
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/solidity/dashboard/src/components/DelegateStakeForm.jsx b/solidity/dashboard/src/components/DelegateStakeForm.jsx
index f861f6e984..b37d18fb04 100644
--- a/solidity/dashboard/src/components/DelegateStakeForm.jsx
+++ b/solidity/dashboard/src/components/DelegateStakeForm.jsx
@@ -123,9 +123,7 @@ const TokensAmountField = ({
           normalize={normalizeAmount}
           format={formatFormAmount}
           placeholder="0"
-          instructionText={`The minimum stake is ${displayAmount(
-            minStake
-          )} KEEP`}
+          additionalInfoText={`MIN STAKE ${displayAmount(minStake)} KEEP`}
           leftIcon={<Icons.KeepOutline className="keep-outline--mint-100" />}
           inputAddon={
             <MaxAmountAddon onClick={onAddonClick} text="Max Stake" />
diff --git a/solidity/dashboard/src/components/FormInput.jsx b/solidity/dashboard/src/components/FormInput.jsx
index c6bb19df00..4689baf1fe 100644
--- a/solidity/dashboard/src/components/FormInput.jsx
+++ b/solidity/dashboard/src/components/FormInput.jsx
@@ -14,7 +14,7 @@ const FormInput = ({
   format,
   normalize,
   tooltipText,
-  instructionText,
+  additionalInfoText,
   leftIcon,
   inputAddon,
   ...props
@@ -39,9 +39,9 @@ const FormInput = ({
     <div className="form-input flex flex-1 column">
       <label className="input__label" style={alignToInput}>
         <span className="input__label__text">{label}</span>
-        {instructionText && (
-          <span className="input__label__instruction-text">
-            {instructionText}
+        {additionalInfoText && (
+          <span className="input__label__additional-info-text">
+            {additionalInfoText}
           </span>
         )}
         {tooltipText && (
diff --git a/solidity/dashboard/src/css/delegate-stake-form.less b/solidity/dashboard/src/css/delegate-stake-form.less
index 55e6086a45..8ae22e0f12 100644
--- a/solidity/dashboard/src/css/delegate-stake-form.less
+++ b/solidity/dashboard/src/css/delegate-stake-form.less
@@ -38,8 +38,8 @@
 
         .form-input {
             margin-bottom: 0.5rem;
-            > label.input__label > .input__label__instruction-text {
-                color: @validation-color;
+            > label.input__label > .input__label__additional-info-text {
+                color: @color-black;
             }
 
             .form-input__addon {
diff --git a/solidity/dashboard/src/css/forms.less b/solidity/dashboard/src/css/forms.less
index 3d0a1bbcbe..43acba4a51 100644
--- a/solidity/dashboard/src/css/forms.less
+++ b/solidity/dashboard/src/css/forms.less
@@ -81,10 +81,15 @@ input {
         color: @color-grey-60
       }
 
-      &__instruction-text {
-        font-weight: normal;
-        color: @color-grey-40;
-        margin-left: 0.5rem;
+      &__additional-info-text {
+        font-weight: 500;
+        margin-left: auto;
+        margin-bottom: 0.5rem;
+        float: right;
+        border-radius: 100px;
+        padding: 0.3rem 0.5rem;
+        background-color: @color-mint-40;
+        line-height: 1.25rem;
       }
 
       &__tooltip {

From e1570de8839d0fd875ff00b5a7d1ac40464a7bd9 Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Thu, 11 Mar 2021 11:12:52 +0100
Subject: [PATCH 04/10] Change input label tooltip style

---
 .../src/components/DelegateStakeForm.jsx      |  3 ++
 .../dashboard/src/components/FormInput.jsx    | 34 ++++++++++---------
 .../src/css/delegate-stake-form.less          |  2 +-
 solidity/dashboard/src/css/forms.less         | 26 ++++++++------
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/solidity/dashboard/src/components/DelegateStakeForm.jsx b/solidity/dashboard/src/components/DelegateStakeForm.jsx
index b37d18fb04..de53c32dc9 100644
--- a/solidity/dashboard/src/components/DelegateStakeForm.jsx
+++ b/solidity/dashboard/src/components/DelegateStakeForm.jsx
@@ -128,6 +128,9 @@ const TokensAmountField = ({
           inputAddon={
             <MaxAmountAddon onClick={onAddonClick} text="Max Stake" />
           }
+          tooltipText={
+            "The minimum stake will decrease to 50,000 KEEP on 04/28/2021. You can see the full shedule in our staking docs here."
+          }
         />
         <div className="text-caption--green-theme text-right ml-a">
           {displayAmount(availableToStake)} available to stake
diff --git a/solidity/dashboard/src/components/FormInput.jsx b/solidity/dashboard/src/components/FormInput.jsx
index 4689baf1fe..e476f958a8 100644
--- a/solidity/dashboard/src/components/FormInput.jsx
+++ b/solidity/dashboard/src/components/FormInput.jsx
@@ -39,22 +39,24 @@ const FormInput = ({
     <div className="form-input flex flex-1 column">
       <label className="input__label" style={alignToInput}>
         <span className="input__label__text">{label}</span>
-        {additionalInfoText && (
-          <span className="input__label__additional-info-text">
-            {additionalInfoText}
-          </span>
-        )}
-        {tooltipText && (
-          <Tooltip
-            simple
-            direction="top"
-            delay={0}
-            triggerComponent={Icons.MoreInfo}
-            className="input__label__tooltip"
-          >
-            {tooltipText}
-          </Tooltip>
-        )}
+        <div className={"input__label__info-container"}>
+          {tooltipText && (
+            <Tooltip
+              simple
+              direction="top"
+              delay={0}
+              triggerComponent={Icons.MoreInfo}
+              className="input__label__info-container__tooltip"
+            >
+              {tooltipText}
+            </Tooltip>
+          )}
+          {additionalInfoText && (
+            <span className="input__label__info-container__additional-info-text">
+              {additionalInfoText}
+            </span>
+          )}
+        </div>
       </label>
       <div className="form-input__wrapper">
         {leftIconComponent}
diff --git a/solidity/dashboard/src/css/delegate-stake-form.less b/solidity/dashboard/src/css/delegate-stake-form.less
index 8ae22e0f12..4d6f8aa199 100644
--- a/solidity/dashboard/src/css/delegate-stake-form.less
+++ b/solidity/dashboard/src/css/delegate-stake-form.less
@@ -38,7 +38,7 @@
 
         .form-input {
             margin-bottom: 0.5rem;
-            > label.input__label > .input__label__additional-info-text {
+            > label.input__label > .input__label__info-container__additional-info-text {
                 color: @color-black;
             }
 
diff --git a/solidity/dashboard/src/css/forms.less b/solidity/dashboard/src/css/forms.less
index 43acba4a51..4427935d0d 100644
--- a/solidity/dashboard/src/css/forms.less
+++ b/solidity/dashboard/src/css/forms.less
@@ -81,19 +81,25 @@ input {
         color: @color-grey-60
       }
 
-      &__additional-info-text {
-        font-weight: 500;
+      &__info-container {
         margin-left: auto;
+        display: flex;
+        align-items: center;
         margin-bottom: 0.5rem;
-        float: right;
-        border-radius: 100px;
-        padding: 0.3rem 0.5rem;
-        background-color: @color-mint-40;
-        line-height: 1.25rem;
-      }
 
-      &__tooltip {
-        margin-left: 0.25rem;
+        &__additional-info-text {
+          font-weight: 500;
+          margin-bottom: 0.3rem;
+          float: right;
+          border-radius: 100px;
+          padding: 0.3rem 0.5rem;
+          background-color: @color-mint-40;
+          line-height: 1.25rem;
+        }
+
+        &__tooltip {
+          margin-right: 0.5rem;
+        }
       }
     }
 

From 8c1b8491eea92a6aaf1baa20467a85693dec78fe Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Thu, 11 Mar 2021 11:44:50 +0100
Subject: [PATCH 05/10] Add link to the tooltip

Add link to the docs
---
 .../src/components/DelegateStakeForm.jsx       | 18 +++++++++++++++---
 .../dashboard/src/components/FormInput.jsx     |  7 +++++--
 solidity/dashboard/src/css/forms.less          | 11 ++++++++---
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/solidity/dashboard/src/components/DelegateStakeForm.jsx b/solidity/dashboard/src/components/DelegateStakeForm.jsx
index de53c32dc9..8f19701937 100644
--- a/solidity/dashboard/src/components/DelegateStakeForm.jsx
+++ b/solidity/dashboard/src/components/DelegateStakeForm.jsx
@@ -9,8 +9,6 @@ import {
 } from "../forms/common-validators"
 import { useCustomOnSubmitFormik } from "../hooks/useCustomOnSubmitFormik"
 import { displayAmount, fromTokenUnit } from "../utils/token.utils"
-import ProgressBar from "./ProgressBar"
-import { colors } from "../constants/colors"
 import {
   normalizeAmount,
   formatAmount as formatFormAmount,
@@ -112,6 +110,16 @@ const TokensAmountField = ({
   stakeTokensValue,
 }) => {
   const onAddonClick = useSetMaxAmountToken("stakeTokens", availableToStake)
+  const stakingDocsLink = (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href={"https://staking.keep.network/about-staking/staking-minimums"}
+      className="text-white text-link"
+    >
+      here
+    </a>
+  )
 
   return (
     <div className="token-amount-wrapper">
@@ -129,7 +137,11 @@ const TokensAmountField = ({
             <MaxAmountAddon onClick={onAddonClick} text="Max Stake" />
           }
           tooltipText={
-            "The minimum stake will decrease to 50,000 KEEP on 04/28/2021. You can see the full shedule in our staking docs here."
+            <>
+              The minimum stake will decrease to 50,000 KEEP on 04/28/2021. You
+              can see the full schedule in our staking docs{" "}
+              {stakingDocsLink}
+            </>
           }
         />
         <div className="text-caption--green-theme text-right ml-a">
diff --git a/solidity/dashboard/src/components/FormInput.jsx b/solidity/dashboard/src/components/FormInput.jsx
index e476f958a8..437ff8bb7c 100644
--- a/solidity/dashboard/src/components/FormInput.jsx
+++ b/solidity/dashboard/src/components/FormInput.jsx
@@ -39,11 +39,14 @@ const FormInput = ({
     <div className="form-input flex flex-1 column">
       <label className="input__label" style={alignToInput}>
         <span className="input__label__text">{label}</span>
-        <div className={"input__label__info-container"}>
+        <div
+          className={`input__label__info-container ${
+            additionalInfoText ? "align-right" : ""
+          }`}
+        >
           {tooltipText && (
             <Tooltip
               simple
-              direction="top"
               delay={0}
               triggerComponent={Icons.MoreInfo}
               className="input__label__info-container__tooltip"
diff --git a/solidity/dashboard/src/css/forms.less b/solidity/dashboard/src/css/forms.less
index 4427935d0d..7d5e329b73 100644
--- a/solidity/dashboard/src/css/forms.less
+++ b/solidity/dashboard/src/css/forms.less
@@ -82,10 +82,14 @@ input {
       }
 
       &__info-container {
-        margin-left: auto;
         display: flex;
         align-items: center;
-        margin-bottom: 0.5rem;
+        margin-left: 0.1rem;
+
+        &.align-right {
+          margin-left: auto;
+          margin-bottom: 0.5rem;
+        }
 
         &__additional-info-text {
           font-weight: 500;
@@ -95,10 +99,11 @@ input {
           padding: 0.3rem 0.5rem;
           background-color: @color-mint-40;
           line-height: 1.25rem;
+          margin-left: 0.5rem;
         }
 
         &__tooltip {
-          margin-right: 0.5rem;
+          margin-left: 0.25rem;
         }
       }
     }

From 562667100e28dac5cc8f868da6ab708059f738ea Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Thu, 11 Mar 2021 13:22:16 +0100
Subject: [PATCH 06/10] Fix form input width bug

Change the width of the input content if there is a button inside the input.
---
 solidity/dashboard/src/components/FormInput.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/solidity/dashboard/src/components/FormInput.jsx b/solidity/dashboard/src/components/FormInput.jsx
index 437ff8bb7c..250a139b5d 100644
--- a/solidity/dashboard/src/components/FormInput.jsx
+++ b/solidity/dashboard/src/components/FormInput.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, {useLayoutEffect, useRef, useState} from "react"
 import { useField } from "formik"
 import * as Icons from "./Icons"
 import Tooltip from "./Tooltip"
@@ -20,6 +20,14 @@ const FormInput = ({
   ...props
 }) => {
   const [field, meta, helpers] = useField(props.name, props.type)
+  const inputAddonRef = useRef(null)
+  const [inputPaddingRight, setInputPaddingRight] = useState(0)
+
+  useLayoutEffect(() => {
+    const inputAddonStyles = window.getComputedStyle(inputAddonRef.current)
+    const finalWidth = parseInt(inputAddonStyles.right, 10) + parseInt(inputAddonStyles.width, 10) + 10
+    setInputPaddingRight(finalWidth)
+  }, [])
 
   const leftIconComponent =
     leftIcon && React.isValidElement(leftIcon)
@@ -71,8 +79,9 @@ const FormInput = ({
             helpers.setValue(normalize ? normalize(value) : value)
           }}
           value={format ? format(field.value) : field.value}
+          style={{ paddingRight: `${inputPaddingRight}px`}}
         />
-        <div className="form-input__addon">{inputAddon}</div>
+        <div ref={inputAddonRef} className="form-input__addon">{inputAddon}</div>
       </div>
       {meta.touched && meta.error ? (
         <div className="form-input__error" style={alignToInput}>

From ac2a0e2e6f598fedc0fd7ec9234e84fb92a36b7e Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Thu, 11 Mar 2021 13:36:02 +0100
Subject: [PATCH 07/10] Change the order of the Delegations pages

Change the order of the Wallet Tokens page and Granted Tokens page on the top
menu of Delegations page
---
 solidity/dashboard/src/pages/delegation/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/solidity/dashboard/src/pages/delegation/index.js b/solidity/dashboard/src/pages/delegation/index.js
index e7b010eff0..6266328100 100644
--- a/solidity/dashboard/src/pages/delegation/index.js
+++ b/solidity/dashboard/src/pages/delegation/index.js
@@ -139,7 +139,7 @@ export const DelegationPageWrapper = connect(
 DelegationPage.route = {
   title: "Delegations",
   path: "/delegations",
-  pages: [WalletTokensPage, GrantedTokensPage],
+  pages: [GrantedTokensPage, WalletTokensPage],
 }
 
 export default DelegationPage

From a7c0bf04ddb8b4637b31ad550342232d3a46d961 Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Tue, 16 Mar 2021 11:47:44 +0100
Subject: [PATCH 08/10] Calculate next min stake value and date

Calculate next min stake value and date based on the minimum stake diminishing
schedule - https://staking.keep.network/about-staking/staking-minimums
---
 .../src/components/DelegateStakeForm.jsx      | 46 +++++++++++++++++--
 solidity/dashboard/src/constants/constants.js |  5 ++
 solidity/dashboard/src/utils/token.utils.js   | 10 +++-
 3 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/solidity/dashboard/src/components/DelegateStakeForm.jsx b/solidity/dashboard/src/components/DelegateStakeForm.jsx
index 8f19701937..9c3af25758 100644
--- a/solidity/dashboard/src/components/DelegateStakeForm.jsx
+++ b/solidity/dashboard/src/components/DelegateStakeForm.jsx
@@ -17,6 +17,8 @@ import { lte } from "../utils/arithmetics.utils"
 import * as Icons from "./Icons"
 import MaxAmountAddon from "./MaxAmountAddon"
 import useSetMaxAmountToken from "../hooks/useSetMaxAmountToken"
+import moment from "moment"
+import { AMOUNT_UNIT } from "../constants/constants"
 
 const DelegateStakeForm = ({
   onSubmit,
@@ -121,6 +123,43 @@ const TokensAmountField = ({
     </a>
   )
 
+  const nextMinStake = () => {
+    let finalValue = 110000
+    const currentDate = moment().utc()
+
+    // Minimum stake diminishing schedule can be found here:
+    // https://staking.keep.network/about-staking/staking-minimums
+    const minimumStakeDiminishingSchedule = [
+      moment.utc("04-28-2020", "MM-DD-YYYY"),
+      moment.utc("07-10-2020", "MM-DD-YYYY"),
+      moment.utc("09-21-2020", "MM-DD-YYYY"),
+      moment.utc("03-12-2020", "MM-DD-YYYY"),
+      moment.utc("02-14-2021", "MM-DD-YYYY"),
+      moment.utc("04-28-2021", "MM-DD-YYYY"),
+      moment.utc("07-10-2021", "MM-DD-YYYY"),
+      moment.utc("21-09-2021", "MM-DD-YYYY"),
+      moment.utc("12-03-2021", "MM-DD-YYYY"),
+      moment.utc("02-14-2022", "MM-DD-YYYY"),
+    ]
+
+    let finalDate = minimumStakeDiminishingSchedule[0]
+
+    for (const date of minimumStakeDiminishingSchedule) {
+      if (currentDate.isSameOrAfter(date)) {
+        finalValue -= 10000
+      } else {
+        finalDate = date
+        break
+      }
+    }
+
+    return {
+      value: finalValue,
+      date: finalDate.format("MM/DD/YYYY"),
+    }
+  }
+
+  const nextMinStakeInfo = nextMinStake()
   return (
     <div className="token-amount-wrapper">
       <div className="token-amount-field">
@@ -138,9 +177,10 @@ const TokensAmountField = ({
           }
           tooltipText={
             <>
-              The minimum stake will decrease to 50,000 KEEP on 04/28/2021. You
-              can see the full schedule in our staking docs{" "}
-              {stakingDocsLink}
+              The minimum stake will decrease to{" "}
+              {displayAmount(nextMinStakeInfo.value, true, AMOUNT_UNIT.TOKEN)}{" "}
+              KEEP on {nextMinStakeInfo.date}. You can see the full schedule in
+              our staking docs {stakingDocsLink}
             </>
           }
         />
diff --git a/solidity/dashboard/src/constants/constants.js b/solidity/dashboard/src/constants/constants.js
index 03ee8b4d1d..3878d653b4 100644
--- a/solidity/dashboard/src/constants/constants.js
+++ b/solidity/dashboard/src/constants/constants.js
@@ -23,6 +23,11 @@ export const KEEP_TOKEN_GEYSER_CONTRACT_NAME = "keepTokenGeyserContract"
 export const PENDING_STATUS = "PENDING"
 export const COMPLETE_STATUS = "COMPLETE"
 
+export const AMOUNT_UNIT = {
+  TOKEN: "TOKEN",
+  WEI: "WEI",
+}
+
 export const WALLETS = {
   METAMASK: { label: "MetaMask" },
   TREZOR: { label: "Trezor" },
diff --git a/solidity/dashboard/src/utils/token.utils.js b/solidity/dashboard/src/utils/token.utils.js
index 09b00300f4..eb0444e9d8 100644
--- a/solidity/dashboard/src/utils/token.utils.js
+++ b/solidity/dashboard/src/utils/token.utils.js
@@ -1,4 +1,5 @@
 import BigNumber from "bignumber.js"
+import { AMOUNT_UNIT } from "../constants/constants"
 
 const metrics = [
   { divisor: 1, symbol: "" },
@@ -6,9 +7,14 @@ const metrics = [
   { divisor: 1e6, symbol: "M" },
 ]
 
-export function displayAmount(amount, withCommaSeparator = true) {
+export function displayAmount(
+  amount,
+  withCommaSeparator = true,
+  unit = AMOUNT_UNIT.WEI
+) {
   if (amount) {
-    const readableFormat = toTokenUnit(amount)
+    const readableFormat =
+      unit === AMOUNT_UNIT.WEI ? toTokenUnit(amount) : new BigNumber(amount)
     return withCommaSeparator
       ? readableFormat.toFormat(0, BigNumber.ROUND_DOWN)
       : readableFormat.toString()

From 32cd2b97457be9e1874bc86977dc0f04a8e07bc7 Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Tue, 16 Mar 2021 11:52:35 +0100
Subject: [PATCH 09/10] Fix js lint errors

---
 solidity/dashboard/src/components/FormInput.jsx | 13 +++++++++----
 solidity/dashboard/src/pages/OverviewPage.jsx   |  8 ++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/solidity/dashboard/src/components/FormInput.jsx b/solidity/dashboard/src/components/FormInput.jsx
index 250a139b5d..44fee634ea 100644
--- a/solidity/dashboard/src/components/FormInput.jsx
+++ b/solidity/dashboard/src/components/FormInput.jsx
@@ -1,4 +1,4 @@
-import React, {useLayoutEffect, useRef, useState} from "react"
+import React, { useLayoutEffect, useRef, useState } from "react"
 import { useField } from "formik"
 import * as Icons from "./Icons"
 import Tooltip from "./Tooltip"
@@ -25,7 +25,10 @@ const FormInput = ({
 
   useLayoutEffect(() => {
     const inputAddonStyles = window.getComputedStyle(inputAddonRef.current)
-    const finalWidth = parseInt(inputAddonStyles.right, 10) + parseInt(inputAddonStyles.width, 10) + 10
+    const finalWidth =
+      parseInt(inputAddonStyles.right, 10) +
+      parseInt(inputAddonStyles.width, 10) +
+      10
     setInputPaddingRight(finalWidth)
   }, [])
 
@@ -79,9 +82,11 @@ const FormInput = ({
             helpers.setValue(normalize ? normalize(value) : value)
           }}
           value={format ? format(field.value) : field.value}
-          style={{ paddingRight: `${inputPaddingRight}px`}}
+          style={{ paddingRight: `${inputPaddingRight}px` }}
         />
-        <div ref={inputAddonRef} className="form-input__addon">{inputAddon}</div>
+        <div ref={inputAddonRef} className="form-input__addon">
+          {inputAddon}
+        </div>
       </div>
       {meta.touched && meta.error ? (
         <div className="form-input__error" style={alignToInput}>
diff --git a/solidity/dashboard/src/pages/OverviewPage.jsx b/solidity/dashboard/src/pages/OverviewPage.jsx
index e9c60c0f6f..e271380409 100644
--- a/solidity/dashboard/src/pages/OverviewPage.jsx
+++ b/solidity/dashboard/src/pages/OverviewPage.jsx
@@ -133,7 +133,9 @@ const OverviewFirstSection = () => {
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href={"https://balancer.exchange/#/swap/ether/0x85eee30c52b0b379b046fb0f85f4f3dc3009afec"}
+            href={
+              "https://balancer.exchange/#/swap/ether/0x85eee30c52b0b379b046fb0f85f4f3dc3009afec"
+            }
             className="text-black mr-2"
           >
             Balancer
@@ -144,7 +146,9 @@ const OverviewFirstSection = () => {
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href={"https://app.uniswap.org/#/swap?inputCurrency=ETH&outputCurrency=0x85eee30c52b0b379b046fb0f85f4f3dc3009afec"}
+            href={
+              "https://app.uniswap.org/#/swap?inputCurrency=ETH&outputCurrency=0x85eee30c52b0b379b046fb0f85f4f3dc3009afec"
+            }
             className="text-black"
           >
             Uniswap

From e80b9aebf428142748a753253c805a26b595cf8e Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Tue, 16 Mar 2021 12:15:21 +0100
Subject: [PATCH 10/10] Move min stake calculations to utils

Move `nextMinStake` function to utils (and change it's name to
`getNextMinStake`). Also assing amount of tokens to specific dates instead of
calculating the value in for loop.
---
 .../src/components/DelegateStakeForm.jsx      | 40 +-----------
 .../src/utils/minimum-stake-schedule.js       | 65 +++++++++++++++++++
 2 files changed, 67 insertions(+), 38 deletions(-)
 create mode 100644 solidity/dashboard/src/utils/minimum-stake-schedule.js

diff --git a/solidity/dashboard/src/components/DelegateStakeForm.jsx b/solidity/dashboard/src/components/DelegateStakeForm.jsx
index 9c3af25758..5c39463296 100644
--- a/solidity/dashboard/src/components/DelegateStakeForm.jsx
+++ b/solidity/dashboard/src/components/DelegateStakeForm.jsx
@@ -17,8 +17,8 @@ import { lte } from "../utils/arithmetics.utils"
 import * as Icons from "./Icons"
 import MaxAmountAddon from "./MaxAmountAddon"
 import useSetMaxAmountToken from "../hooks/useSetMaxAmountToken"
-import moment from "moment"
 import { AMOUNT_UNIT } from "../constants/constants"
+import { getNextMinStake } from "../utils/minimum-stake-schedule"
 
 const DelegateStakeForm = ({
   onSubmit,
@@ -123,43 +123,7 @@ const TokensAmountField = ({
     </a>
   )
 
-  const nextMinStake = () => {
-    let finalValue = 110000
-    const currentDate = moment().utc()
-
-    // Minimum stake diminishing schedule can be found here:
-    // https://staking.keep.network/about-staking/staking-minimums
-    const minimumStakeDiminishingSchedule = [
-      moment.utc("04-28-2020", "MM-DD-YYYY"),
-      moment.utc("07-10-2020", "MM-DD-YYYY"),
-      moment.utc("09-21-2020", "MM-DD-YYYY"),
-      moment.utc("03-12-2020", "MM-DD-YYYY"),
-      moment.utc("02-14-2021", "MM-DD-YYYY"),
-      moment.utc("04-28-2021", "MM-DD-YYYY"),
-      moment.utc("07-10-2021", "MM-DD-YYYY"),
-      moment.utc("21-09-2021", "MM-DD-YYYY"),
-      moment.utc("12-03-2021", "MM-DD-YYYY"),
-      moment.utc("02-14-2022", "MM-DD-YYYY"),
-    ]
-
-    let finalDate = minimumStakeDiminishingSchedule[0]
-
-    for (const date of minimumStakeDiminishingSchedule) {
-      if (currentDate.isSameOrAfter(date)) {
-        finalValue -= 10000
-      } else {
-        finalDate = date
-        break
-      }
-    }
-
-    return {
-      value: finalValue,
-      date: finalDate.format("MM/DD/YYYY"),
-    }
-  }
-
-  const nextMinStakeInfo = nextMinStake()
+  const nextMinStakeInfo = getNextMinStake()
   return (
     <div className="token-amount-wrapper">
       <div className="token-amount-field">
diff --git a/solidity/dashboard/src/utils/minimum-stake-schedule.js b/solidity/dashboard/src/utils/minimum-stake-schedule.js
new file mode 100644
index 0000000000..4d3e6b2c00
--- /dev/null
+++ b/solidity/dashboard/src/utils/minimum-stake-schedule.js
@@ -0,0 +1,65 @@
+import moment from "moment"
+
+const dateFormat = "MM/DD/YYYY"
+
+// Minimum stake diminishing schedule can be found here:
+// https://staking.keep.network/about-staking/staking-minimums
+const minimumStakeDiminishingSchedule = [
+  {
+    date: moment.utc("04/28/2020", dateFormat),
+    value: 100000,
+  },
+  {
+    date: moment.utc("04/28/2020", dateFormat),
+    value: 90000,
+  },
+  {
+    date: moment.utc("09/21/2020", dateFormat),
+    value: 80000,
+  },
+  {
+    date: moment.utc("03/12/2020", dateFormat),
+    value: 70000,
+  },
+  {
+    date: moment.utc("02/14/2021", dateFormat),
+    value: 60000,
+  },
+  {
+    date: moment.utc("04/28/2021", dateFormat),
+    value: 50000,
+  },
+  {
+    date: moment.utc("07/10/2021", dateFormat),
+    value: 40000,
+  },
+  {
+    date: moment.utc("21/09/2021", dateFormat),
+    value: 30000,
+  },
+  {
+    date: moment.utc("12/03/2021", dateFormat),
+    value: 20000,
+  },
+  {
+    date: moment.utc("02/14/2022", dateFormat),
+    value: 10000,
+  },
+]
+
+export const getNextMinStake = () => {
+  const currentDate = moment().utc()
+
+  for (const minimumStakeInfo of minimumStakeDiminishingSchedule) {
+    if (!currentDate.isSameOrAfter(minimumStakeInfo.date)) {
+      return {
+        date: minimumStakeInfo.date.format(dateFormat),
+        value: minimumStakeInfo.value,
+      }
+    }
+  }
+
+  return minimumStakeDiminishingSchedule[
+    minimumStakeDiminishingSchedule.length - 1
+  ]
+}