Percentage Picker & Minimum input improvements

scrtlabs · Sep 22, 2024 · 91ef2a1 · 91ef2a1
1 parent ac9709a
commit 91ef2a1
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 25 deletions.
diff --git a/src/pages/ibc/components/IbcForm.tsx b/src/pages/ibc/components/IbcForm.tsx
@@ -119,12 +119,12 @@ export default function IbcForm() {
         (balance !== ('viewingKeyError' as GetBalanceError) || balance !== ('GenericFetchError' as GetBalanceError)) &&
         balance !== null
       ) {
-        formik.setFieldValue(
-          'amount',
-          Number((balance as BigNumber).dividedBy(`1e${formik.values.token.decimals}`).times(percentage / 100)).toFixed(
-            formik.values.token.decimals
-          )
-        )
+        const scaledAmount = (balance as BigNumber)
+          .times(percentage / 100)
+          .dividedBy(`1e${formik.values.token.decimals}`)
+          .decimalPlaces(formik.values.token.decimals, BigNumber.ROUND_DOWN)
+
+        formik.setFieldValue('amount', scaledAmount.toFixed(formik.values.token.decimals))
       }
     } else if (formik.values.ibcMode === 'deposit') {
       const IbcBalance = getIbcBalance(formik.values.chain, formik.values.token)

diff --git a/src/pages/ibc/components/ibcSchema.ts b/src/pages/ibc/components/ibcSchema.ts
@@ -5,9 +5,20 @@ import { chains } from 'utils/config'
 export const ibcSchema = yup.object().shape({
   amount: yup
     .number()
-    .min(0.000001, 'Please enter a valid amount')
     .typeError('Please enter a valid amount')
-    .required('Please enter a valid amount'),
+    .required('Please enter a valid amount')
+    .test('min-amount', 'Please enter a valid amount', function (value) {
+      const { token } = this.parent
+      if (token && typeof token.decimals === 'number') {
+        const minAmount = Math.pow(10, -token.decimals)
+        if (value < minAmount) {
+          return this.createError({
+            message: `Please enter an amount of at least ${minAmount}`
+          })
+        }
+      }
+      return true
+    }),
   token: yup.mixed().required('Token is required'),
   chain: yup
     .mixed()
@@ -17,6 +28,6 @@ export const ibcSchema = yup.object().shape({
     ),
   ibcMode: yup
     .string()
-    .test('isIbcMode', 'Invalid IBC Mode', (value) => isIbcMode(value))
     .required('Please pick an IBC Mode')
+    .test('isIbcMode', 'Invalid IBC Mode', (value) => isIbcMode(value))
 })
diff --git a/src/pages/send/components/SendForm.tsx b/src/pages/send/components/SendForm.tsx
@@ -126,12 +126,12 @@ export default function SendForm() {
       (balance !== ('viewingKeyError' as GetBalanceError) || balance !== ('GenericFetchError' as GetBalanceError)) &&
       balance !== null
     ) {
-      formik.setFieldValue(
-        'amount',
-        Number((balance as BigNumber).dividedBy(`1e${formik.values.token.decimals}`).times(percentage / 100)).toFixed(
-          formik.values.token.decimals
-        )
-      )
+      const scaledAmount = (balance as BigNumber)
+        .times(percentage / 100)
+        .dividedBy(`1e${formik.values.token.decimals}`)
+        .decimalPlaces(formik.values.token.decimals, BigNumber.ROUND_DOWN)
+
+      formik.setFieldValue('amount', scaledAmount.toFixed(formik.values.token.decimals))
     }
     formik.setFieldTouched('amount', true)
   }

diff --git a/src/pages/send/sendSchema.ts b/src/pages/send/sendSchema.ts
@@ -4,9 +4,20 @@ import { validateAddress } from 'secretjs'
 export const sendSchema = yup.object().shape({
   amount: yup
     .number()
-    .min(0.000001, 'Please enter a valid amount')
     .typeError('Please enter a valid amount')
-    .required('Please enter a valid amount'),
+    .required('Please enter a valid amount')
+    .test('min-amount', 'Please enter a valid amount', function (value) {
+      const { token } = this.parent
+      if (token && typeof token.decimals === 'number') {
+        const minAmount = Math.pow(10, -token.decimals)
+        if (value < minAmount) {
+          return this.createError({
+            message: `Please enter an amount of at least ${minAmount}`
+          })
+        }
+      }
+      return true
+    }),
   token: yup.mixed().required('Token is required'),
   recipient: yup
     .string()

diff --git a/src/pages/wrap/components/WrapForm.tsx b/src/pages/wrap/components/WrapForm.tsx
@@ -145,17 +145,19 @@ export default function WrapForm() {
 
   function setAmountByPercentage(percentage: number) {
     const balance = getBalance(formik.values.token, formik.values.wrappingMode === 'unwrap')
+
     if (
       (balance !== ('viewingKeyError' as GetBalanceError) || balance !== ('GenericFetchError' as GetBalanceError)) &&
       balance !== null
     ) {
-      formik.setFieldValue(
-        'amount',
-        Number((balance as BigNumber).dividedBy(`1e${formik.values.token.decimals}`).times(percentage / 100)).toFixed(
-          formik.values.token.decimals
-        )
-      )
+      const scaledAmount = (balance as BigNumber)
+        .times(percentage / 100)
+        .dividedBy(`1e${formik.values.token.decimals}`)
+        .decimalPlaces(formik.values.token.decimals, BigNumber.ROUND_DOWN)
+
+      formik.setFieldValue('amount', scaledAmount.toFixed(formik.values.token.decimals))
     }
+
     formik.setFieldTouched('amount', true)
   }
 

diff --git a/src/pages/wrap/wrapSchema.ts b/src/pages/wrap/wrapSchema.ts
@@ -5,9 +5,20 @@ import { tokens } from 'utils/config'
 export const wrapSchema = yup.object().shape({
   amount: yup
     .number()
-    .min(0.000001, 'Please enter a valid amount')
     .typeError('Please enter a valid amount')
-    .required('Please enter a valid amount'),
+    .required('Please enter a valid amount')
+    .test('min-amount', 'Please enter a valid amount', function (value) {
+      const { token } = this.parent
+      if (token && typeof token.decimals === 'number') {
+        const minAmount = Math.pow(10, -token.decimals)
+        if (value < minAmount) {
+          return this.createError({
+            message: `Please enter an amount of at least ${minAmount}`
+          })
+        }
+      }
+      return true
+    }),
   token: yup.mixed().required('Token is required'),
   wrappingMode: yup
     .string()