ui update

Author: Nebyt

src/components/cards/govActions/dRepRegistrationPanel.js

@@ -49,14 +49,16 @@ const DRepRegistrationPanel = (props) => {
   return (
     <GovToolsPanel {...panelProps}>
       <InputWithLabel
-        inputName="DRep ID (Bech32 or Hex encoded)"
+        inputName="DRep ID"
+        helpText="Bech32 or Hex encoded"
         inputValue={dRepIdInputValue}
         onChangeFunction={(event) => {
           setDRepIdInputValue(event.target.value)
         }}
       />
       <InputWithLabel
-        inputName="DRep Registration Deposit Amount (lovelaces)"
+        inputName="DRep Registration Deposit Amount"
+        helpText="This should be align with current protocol parameters (in lovelace)"
         inputValue={depositAmount}
         onChangeFunction={(event) => {
           setDepositAmount(event.target.value)

src/components/cards/govActions/dRepRetirementPanel.js

@@ -35,14 +35,16 @@ const DRepRetirementPanel = (props) => {
   return (
     <GovToolsPanel {...panelProps}>
       <InputWithLabel
-        inputName="DRep ID (Bech32 or Hex encoded)"
+        inputName="DRep ID"
+        helpText="Bech32 or Hex encoded"
         inputValue={dRepIdInputValue}
         onChangeFunction={(event) => {
           setDRepIdInputValue(event.target.value)
         }}
       />
       <InputWithLabel
-        inputName="DRep Registration Deposit Refund Amount (lovelaces)"
+        inputName="DRep Registration Deposit Refund Amount"
+        helpText="This should be align with how much was paid during registration (in lovelace)"
         inputValue={depositRefundAmount}
         onChangeFunction={(event) => {
           setDepositRefundAmount(event.target.value)

src/components/cards/govActions/dRepUpdatePanel.js

@@ -50,7 +50,8 @@ const DRepUpdatePanel = (props) => {
   return (
     <GovToolsPanel {...panelProps}>
       <InputWithLabel
-        inputName="DRep ID (Bech32 or Hex encoded)"
+        inputName="DRep ID"
+        helpText="Bech32 or Hex encoded"
         inputValue={dRepIdInputValue}
         onChangeFunction={(event) => {
           setDRepIdInputValue(event.target.value)

src/components/cards/govActions/regStakeKeyPanel.js

@@ -64,7 +64,8 @@ const RegisterStakeKeyPanel = (props) => {
         }}
       />
       <InputWithLabel
-        inputName="Stake Key Deposit Amount (lovelaces, this should align with current protocol parameters)"
+        inputName="Stake Key Deposit Amount (lovelaces)"
+        helpText="This should align with current protocol parameters"
         inputValue={stakeDepositAmount}
         onChangeFunction={(event) => {
           setStakeDepositAmount(event.target.value)

src/components/cards/govActions/voteDelegationPanel.js

@@ -71,7 +71,8 @@ const VoteDelegationPanel = (props) => {
   return (
     <GovToolsPanel {...panelProps}>
       <InputWithLabel
-        inputName="Target of vote delegation | abstain | no confidence"
+        inputName="Target of vote delegation"
+        helpText="DRep ID | abstain | no confidence"
         inputValue={dRepIdInputValue}
         onChangeFunction={(event) => {
           setDRepIdInputValue(event.target.value)

src/components/cards/govActions/votePanel.js

@@ -72,6 +72,7 @@ const VotePanel = (props) => {
     <GovToolsPanel {...panelProps}>
       <InputWithLabel
         inputName="DRep ID"
+        helpText="Bech32 or Hex encoded"
         inputValue={dRepIdInputValue}
         onChangeFunction={(event) => {
           setDRepIdInputValue(event.target.value)

src/components/inputWithLabel.js

@@ -2,7 +2,7 @@ import React from 'react'
 import {CommonStyles, ModalWindowContent} from './ui-constants'
 
 const InputWithLabel = (props) => {
-  const {inputName, inputValue, onChangeFunction} = props
+  const {inputName, inputValue, onChangeFunction, helpText} = props
 
   const nftInputID = inputValue.split(' ').join('')
 
@@ -18,6 +18,13 @@ const InputWithLabel = (props) => {
         value={inputValue}
         onChange={onChangeFunction}
       />
+      {helpText ? (
+        <label htmlFor={'input-' + nftInputID} className="block mb-1 ml-1 text-sm font-light text-gray-300">
+          {helpText}
+        </label>
+      ) : (
+        <></>
+      )}
     </div>
   )
 }