ui update

Emurgo · Jan 26, 2024 · 4c7b7cf · 4c7b7cf
1 parent 3531e2c
commit 4c7b7cf
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 8 deletions.
diff --git a/src/components/cards/govActions/dRepRegistrationPanel.js b/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)

diff --git a/src/components/cards/govActions/dRepRetirementPanel.js b/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)

diff --git a/src/components/cards/govActions/dRepUpdatePanel.js b/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)

diff --git a/src/components/cards/govActions/regStakeKeyPanel.js b/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)

diff --git a/src/components/cards/govActions/voteDelegationPanel.js b/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)

diff --git a/src/components/cards/govActions/votePanel.js b/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)

diff --git a/src/components/inputWithLabel.js b/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>
   )
 }