Merge pull request #2379 from keep-network/staking-keep-token-form-re…

…design Staking keep token form redesign This PR makes some UI changes to the staking tokens input in Overview page. Main changes: - remove progress bar with available KEEP tokens below the input - fix the ui problem with higher number of KEEP tokens written inside input that would cover the Max Stake button - add a tooltip that will inform user that the min stake is about to decrease to 50,000 soon - change the order of the Wallet Tokens page and Granted Tokens page on the top menu of Delegations page - some UI changes based on Figma
keep-network · Mar 16, 2021 · 0974f02 · 0974f02
2 parents bb85c7a + e80b9ae
commit 0974f02
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 52 deletions.
diff --git 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,
@@ -19,6 +17,8 @@ import { lte } from "../utils/arithmetics.utils"
 import * as Icons from "./Icons"
 import MaxAmountAddon from "./MaxAmountAddon"
 import useSetMaxAmountToken from "../hooks/useSetMaxAmountToken"
+import { AMOUNT_UNIT } from "../constants/constants"
+import { getNextMinStake } from "../utils/minimum-stake-schedule"
 
 const DelegateStakeForm = ({
   onSubmit,
@@ -112,7 +112,18 @@ 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>
+  )
 
+  const nextMinStakeInfo = getNextMinStake()
   return (
     <div className="token-amount-wrapper">
       <div className="token-amount-field">
@@ -123,27 +134,22 @@ 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" />
           }
+          tooltipText={
+            <>
+              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}
+            </>
+          }
         />
-        <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 className="text-caption--green-theme text-right ml-a">
+          {displayAmount(availableToStake)} available to stake
         </div>
       </div>
     </div>

diff --git 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"
@@ -14,12 +14,23 @@ const FormInput = ({
   format,
   normalize,
   tooltipText,
-  instructionText,
+  additionalInfoText,
   leftIcon,
   inputAddon,
   ...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)
@@ -39,22 +50,27 @@ 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}
-          </span>
-        )}
-        {tooltipText && (
-          <Tooltip
-            simple
-            direction="top"
-            delay={0}
-            triggerComponent={Icons.MoreInfo}
-            className="input__label__tooltip"
-          >
-            {tooltipText}
-          </Tooltip>
-        )}
+        <div
+          className={`input__label__info-container ${
+            additionalInfoText ? "align-right" : ""
+          }`}
+        >
+          {tooltipText && (
+            <Tooltip
+              simple
+              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}
@@ -66,8 +82,11 @@ 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}>

diff --git 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/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__info-container__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
@@ -81,14 +81,30 @@ input {
         color: @color-grey-60
       }
 
-      &__instruction-text {
-        font-weight: normal;
-        color: @color-grey-40;
-        margin-left: 0.5rem;
-      }
-
-      &__tooltip {
-        margin-left: 0.25rem;
+      &__info-container {
+        display: flex;
+        align-items: center;
+        margin-left: 0.1rem;
+
+        &.align-right {
+          margin-left: auto;
+          margin-bottom: 0.5rem;
+        }
+
+        &__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;
+          margin-left: 0.5rem;
+        }
+
+        &__tooltip {
+          margin-left: 0.25rem;
+        }
       }
     }
 

diff --git 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 {

diff --git 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

diff --git 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
diff --git a/solidity/dashboard/src/utils/minimum-stake-schedule.js 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
+  ]
+}
diff --git a/solidity/dashboard/src/utils/token.utils.js b/solidity/dashboard/src/utils/token.utils.js
@@ -1,14 +1,20 @@
 import BigNumber from "bignumber.js"
+import { AMOUNT_UNIT } from "../constants/constants"
 
 const metrics = [
   { divisor: 1, symbol: "" },
   { divisor: 1e3, symbol: "K" },
   { 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()