Merge pull request #180 from scrtlabs/Balance-jiri

Balance Item improvements
scrtlabs · Sep 22, 2024 · 2ac5e0a · 2ac5e0a
2 parents 3e9c1e3 + 91ef2a1
commit 2ac5e0a
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 64 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/portfolio/components/BalanceItem.tsx b/src/pages/portfolio/components/BalanceItem.tsx
@@ -23,37 +23,36 @@ const BalanceItem = (props: Props) => {
 
   return (
     <>
-      <div className="first-of-type:rounded-t-lg last-of-type:rounded-b-lg group flex flex-col sm:flex-row items-center text-center sm:text-left even:bg-gray-100 odd:bg-white dark:even:bg-neutral-900 dark:odd:bg-neutral-800 even:border-x dark:even:border-neutral-800 even:border-white py-8 sm:py-4 gap-4 pl-4 pr-8  w-full min-w-full ">
-        <>
-          <div className="relative flex items-center">
-            <img
-              src={`/img/assets/${props.token?.image}`}
-              alt={`${props.token?.name} logo`}
-              className="w-10 h-10 mr-1 rounded-full"
-            />
-          </div>
-          <div className="flex-1">
+      <div className="first-of-type:rounded-t-lg last-of-type:rounded-b-lg group flex flex-row items-center text-left even:bg-gray-100 odd:bg-white dark:even:bg-neutral-900 dark:odd:bg-neutral-800 even:border-x dark:even:border-neutral-800 last-of-type:border-y even:border-white py-8 sm:py-4 gap-4 pl-4 pr-8 w-full">
+        {/* Token Image and Name */}
+        <div className="flex items-center w-1/4">
+          <img
+            src={`/img/assets/${props.token?.image}`}
+            alt={`${props.token?.name} logo`}
+            className="w-10 h-10 mr-2 rounded-full"
+          />
+          <div>
             <span className="font-semibold dark:text-white text-black">{tokenName}</span>
             <div className="text-xs text-neutral-500 dark:text-neutral-400">{tokenDescription}</div>
           </div>
-        </>
+        </div>
 
         {/* Price */}
         {props.token?.coingecko_id !== '' && (
-          <div className="flex flex-col items-center">
-            <div className="description text-xs text-neutral-500 dark:text-neutral-400 mb-2">Price</div>
+          <div className="flex flex-col items-start w-1/6">
+            <div className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Price</div>
             {assetPrice ? (
               <div className="text-sm font-medium font-mono">{assetPrice}</div>
             ) : (
-              <span className="animate-pulse bg-neutral-300/40 dark:bg-neutral-600 rounded w-20 h-5 ml-2"></span>
+              <span className="animate-pulse bg-neutral-300/40 dark:bg-neutral-600 rounded w-20 h-5"></span>
             )}
           </div>
         )}
 
         {/* Balance */}
         {secretNetworkClient?.address && (
-          <div className="flex-initial min-w-[11rem] flex flex-col items-center">
-            <div className="description text-xs text-neutral-500 dark:text-neutral-400 mb-2">Balance</div>
+          <div className="flex flex-col items-start">
+            <div className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Balance</div>
             <div className="text-sm font-medium">
               <BalanceUI
                 token={allTokens.find((token: Token) => token.name === props.token?.name)}
@@ -64,29 +63,22 @@ const BalanceItem = (props: Props) => {
           </div>
         )}
 
-        {/* Send */}
-        <div className="flex-initial min-w-[2rem] flex flex-col items-center">
-          <div className="description text-xs text-neutral-500 dark:text-neutral-400 mb-2">Send</div>
-          <div className="text-xs">
-            <a
-              href={assetPrice ? `/send?token=` + props.token?.name.toLowerCase() : null}
-              className="bg-gray-500 dark:bg-gray-600 hover:bg-gray-600 dark:hover:bg-gray-700 text-white ring-gray-500/40 dark:ring-gray-600/40 py-1.5 px-2 text-xs focus:outline-none focus-visible:ring-4 text-center font-bold rounded transition-colors"
-            >
-              Send
-            </a>
-          </div>
-        </div>
-        {/* IBC */}
-        <div className="flex-initial min-w-[2rem] flex flex-col items-center">
-          <div className="description text-xs text-neutral-500 dark:text-neutral-400 mb-2">IBC</div>
-          <div className="text-xs">
-            <a
-              href={assetPrice ? `/ibc?token=` + props.token?.name.toLowerCase() : null}
-              className="bg-gray-500 dark:bg-gray-600 hover:bg-gray-600 dark:hover:bg-gray-700 text-white ring-gray-500/40 dark:ring-gray-600/40 py-1.5 px-2 text-xs focus:outline-none focus-visible:ring-4 text-center font-bold rounded transition-colors"
-            >
-              IBC
-            </a>
-          </div>
+        {/* Buttons */}
+        <div className="flex items-center ml-auto">
+          {/* Send */}
+          <a
+            href={assetPrice ? `/send?token=` + props.token?.name.toLowerCase() : null}
+            className="bg-gray-500 dark:bg-gray-600 hover:bg-gray-600 dark:hover:bg-gray-700 text-white py-1.5 px-3 text-xs font-bold rounded transition-colors mr-2"
+          >
+            Send
+          </a>
+          {/* IBC */}
+          <a
+            href={assetPrice ? `/ibc?token=` + props.token?.name.toLowerCase() : null}
+            className="bg-gray-500 dark:bg-gray-600 hover:bg-gray-600 dark:hover:bg-gray-700 text-white py-1.5 px-3 text-xs font-bold rounded transition-colors"
+          >
+            IBC
+          </a>
         </div>
       </div>
     </>

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()