fix(ui): convert current rewardPerPayout to whole units (#178)

* fix(ui): default/initial value must be converted to whole units * feat(ui): show reward token unit name in modal description * feat(ui): instruct user to enter whole units for reward per payout * chore(ui): rename variable to differentiate current/new amount
TxnLab · May 23, 2024 · f5d4340 · f5d4340
1 parent 1c5848b
commit f5d4340
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/ui/src/components/AddValidatorForm.tsx b/ui/src/components/AddValidatorForm.tsx
@@ -711,6 +711,7 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <FormControl>
                       <Input placeholder="" {...field} />
                     </FormControl>
+                    <FormDescription>Enter amount in whole units (not base units)</FormDescription>
                     <FormMessage>{errors.rewardPerPayout?.message}</FormMessage>
                   </FormItem>
                 )}

diff --git a/ui/src/components/ValidatorDetails/EditRewardPerPayout.tsx b/ui/src/components/ValidatorDetails/EditRewardPerPayout.tsx
@@ -12,6 +12,7 @@ import { DialogFooter } from '@/components/ui/dialog'
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -21,7 +22,7 @@ import { Input } from '@/components/ui/input'
 import { EditValidatorModal } from '@/components/ValidatorDetails/EditValidatorModal'
 import { Validator } from '@/interfaces/validator'
 import { setValidatorQueriesData } from '@/utils/contracts'
-import { convertToBaseUnits } from '@/utils/format'
+import { convertFromBaseUnits, convertToBaseUnits } from '@/utils/format'
 import { validatorSchemas } from '@/utils/validation'
 
 interface EditRewardPerPayoutProps {
@@ -47,8 +48,13 @@ export function EditRewardPerPayout({ validator }: EditRewardPerPayoutProps) {
     rewardPerPayout,
   } = validator.config
 
+  const tokenUnitName = validator.rewardToken?.params['unit-name']
+  const tokenDecimals = validator.rewardToken?.params.decimals
+
+  const rewardPerPayoutWholeUnits = convertFromBaseUnits(rewardPerPayout, tokenDecimals)
+
   const defaultValues = {
-    rewardPerPayout: String(Number(rewardPerPayout) || ''),
+    rewardPerPayout: String(rewardPerPayoutWholeUnits || ''),
   }
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -90,7 +96,7 @@ export function EditRewardPerPayout({ validator }: EditRewardPerPayoutProps) {
         throw new Error('No reward token found')
       }
 
-      const rewardPerPayoutBaseUnits = convertToBaseUnits(
+      const newRewardPerPayoutBaseUnits = convertToBaseUnits(
         values.rewardPerPayout,
         validator.rewardToken.params.decimals,
       )
@@ -103,7 +109,7 @@ export function EditRewardPerPayout({ validator }: EditRewardPerPayoutProps) {
         entryGatingAddress,
         entryGatingAssets,
         gatingAssetMinBalance,
-        BigInt(rewardPerPayoutBaseUnits),
+        BigInt(newRewardPerPayoutBaseUnits),
         transactionSigner,
         activeAddress,
       )
@@ -131,7 +137,7 @@ export function EditRewardPerPayout({ validator }: EditRewardPerPayoutProps) {
   return (
     <EditValidatorModal
       title="Edit Reward Per Payout"
-      description={`Set the amount of reward tokens paid out each epoch for Validator ${validator.id}`}
+      description={`Set the amount of ${tokenUnitName || 'reward tokens'} paid out each epoch for Validator ${validator.id}`}
       open={isOpen}
       onOpenChange={handleOpenChange}
     >
@@ -147,6 +153,7 @@ export function EditRewardPerPayout({ validator }: EditRewardPerPayoutProps) {
                   <FormControl>
                     <Input placeholder="" {...field} />
                   </FormControl>
+                  <FormDescription>Enter amount in whole units (not base units)</FormDescription>
                   <FormMessage>{errors.rewardPerPayout?.message}</FormMessage>
                 </FormItem>
               )}