From c44fa97597edc12926d61681c4e5d3b2cc89f5f9 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 11 Feb 2025 12:18:45 +0000
Subject: [PATCH] Fix(Tx history filter): incoming amount with decimals

---
 .../components/transactions/TxFilterForm/index.tsx | 14 +++++++++-----
 .../src/utils/__tests__/tx-history-filter.test.ts  |  2 +-
 apps/web/src/utils/tx-history-filter.ts            | 11 +++++++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/transactions/TxFilterForm/index.tsx b/apps/web/src/components/transactions/TxFilterForm/index.tsx
index 9fb166b661..ae0141686f 100644
--- a/apps/web/src/components/transactions/TxFilterForm/index.tsx
+++ b/apps/web/src/components/transactions/TxFilterForm/index.tsx
@@ -22,6 +22,7 @@ import NumberField from '@/components/common/NumberField'
 
 import css from './styles.module.css'
 import inputCss from '@/styles/inputs.module.css'
+import AddressInput from '@/components/common/AddressInput'
 
 enum TxFilterFormFieldNames {
   FILTER_TYPE = 'type',
@@ -172,13 +173,14 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
                           }}
                         />
                       </Grid>
+
                       <Grid item xs={12} md={6}>
                         <Controller
                           name={TxFilterFormFieldNames.AMOUNT}
                           control={control}
                           rules={{
                             validate: (val: TxFilterFormState[TxFilterFormFieldNames.AMOUNT]) => {
-                              if (val.length > 0) {
+                              if (val?.length > 0) {
                                 return validateAmount(val)
                               }
                             },
@@ -189,7 +191,9 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
                               className={inputCss.input}
                               label={
                                 fieldState.error?.message ||
-                                `Amount${isMultisigFilter && chain ? ` (only ${chain.nativeCurrency.symbol})` : ''}`
+                                (isIncomingFilter
+                                  ? 'Amount (with decimals)'
+                                  : `Amount (only ${chain?.nativeCurrency.symbol || 'ETH'})`)
                               }
                               error={!!fieldState.error}
                               {...field}
@@ -203,9 +207,9 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
 
                   {isIncomingFilter && (
                     <Grid item xs={12} md={6}>
-                      <AddressBookInput
+                      <AddressInput
                         data-testid="token-input"
-                        label="Token"
+                        label="Token address"
                         name={TxFilterFormFieldNames.TOKEN_ADDRESS}
                         required={false}
                         fullWidth
@@ -229,7 +233,7 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
                           control={control}
                           rules={{
                             validate: (val: TxFilterFormState[TxFilterFormFieldNames.NONCE]) => {
-                              if (val.length > 0) {
+                              if (val?.length > 0) {
                                 return validateAmount(val)
                               }
                             },
diff --git a/apps/web/src/utils/__tests__/tx-history-filter.test.ts b/apps/web/src/utils/__tests__/tx-history-filter.test.ts
index a2efaafd7a..4791add54a 100644
--- a/apps/web/src/utils/__tests__/tx-history-filter.test.ts
+++ b/apps/web/src/utils/__tests__/tx-history-filter.test.ts
@@ -214,7 +214,7 @@ describe('tx-history-filter', () => {
       it('should return incoming filters', () => {
         const result = txFilter.parseFormData({
           execution_date__gte: new Date('1970-01-01'),
-          value: '123',
+          value: '123000000000000000000',
           type: 'Incoming' as TxFilterType,
         } as TxFilterFormState)
 
diff --git a/apps/web/src/utils/tx-history-filter.ts b/apps/web/src/utils/tx-history-filter.ts
index 62788697d3..103d677819 100644
--- a/apps/web/src/utils/tx-history-filter.ts
+++ b/apps/web/src/utils/tx-history-filter.ts
@@ -45,6 +45,10 @@ export const _isModuleFilter = (filter: TxFilter['filter']): filter is ModuleTxF
   return 'module' in filter
 }
 
+const NATIVE_DECIMALS = 18
+const parseNativeValue = (value: string) => safeParseUnits(value, NATIVE_DECIMALS)?.toString()
+const formatNativeValue = (value: string) => safeFormatUnits(value, NATIVE_DECIMALS)
+
 // Spread TxFilter basically
 type TxFilterUrlQuery = {
   type: TxFilter['type']
@@ -61,6 +65,8 @@ export const txFilter = {
   },
 
   parseFormData: ({ type, ...formData }: TxFilterFormState): TxFilter => {
+    const isMultisig = type === TxFilterType.MULTISIG
+
     const filter: TxFilter['filter'] = _omitNullish({
       ...formData,
       execution_date__gte: formData.execution_date__gte
@@ -69,7 +75,7 @@ export const txFilter = {
       execution_date__lte: formData.execution_date__lte
         ? endOfDay(formData.execution_date__lte).toISOString()
         : undefined,
-      value: formData.value ? safeParseUnits(formData.value, 18)?.toString() : undefined,
+      value: isMultisig && formData.value ? parseNativeValue(formData.value) : formData.value,
     })
 
     return {
@@ -87,13 +93,14 @@ export const txFilter = {
 
   formatFormData: ({ type, filter }: TxFilter): Partial<TxFilterFormState> => {
     const isModule = _isModuleFilter(filter)
+    const isMultisig = type === TxFilterType.MULTISIG
 
     return {
       type,
       ...filter,
       execution_date__gte: !isModule && filter.execution_date__gte ? new Date(filter.execution_date__gte) : null,
       execution_date__lte: !isModule && filter.execution_date__lte ? new Date(filter.execution_date__lte) : null,
-      value: !isModule && filter.value ? safeFormatUnits(filter.value, 18)?.toString() : '',
+      value: isModule ? '' : isMultisig && filter.value ? formatNativeValue(filter.value) : filter.value,
     }
   },
 }