Skip to content

Commit c44fa97

Browse files
committed
Fix(Tx history filter): incoming amount with decimals
1 parent 4619bf4 commit c44fa97

File tree

3 files changed

+19
-8
lines changed

3 files changed

+19
-8
lines changed

apps/web/src/components/transactions/TxFilterForm/index.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import NumberField from '@/components/common/NumberField'
2222

2323
import css from './styles.module.css'
2424
import inputCss from '@/styles/inputs.module.css'
25+
import AddressInput from '@/components/common/AddressInput'
2526

2627
enum TxFilterFormFieldNames {
2728
FILTER_TYPE = 'type',
@@ -172,13 +173,14 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
172173
}}
173174
/>
174175
</Grid>
176+
175177
<Grid item xs={12} md={6}>
176178
<Controller
177179
name={TxFilterFormFieldNames.AMOUNT}
178180
control={control}
179181
rules={{
180182
validate: (val: TxFilterFormState[TxFilterFormFieldNames.AMOUNT]) => {
181-
if (val.length > 0) {
183+
if (val?.length > 0) {
182184
return validateAmount(val)
183185
}
184186
},
@@ -189,7 +191,9 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
189191
className={inputCss.input}
190192
label={
191193
fieldState.error?.message ||
192-
`Amount${isMultisigFilter && chain ? ` (only ${chain.nativeCurrency.symbol})` : ''}`
194+
(isIncomingFilter
195+
? 'Amount (with decimals)'
196+
: `Amount (only ${chain?.nativeCurrency.symbol || 'ETH'})`)
193197
}
194198
error={!!fieldState.error}
195199
{...field}
@@ -203,9 +207,9 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
203207

204208
{isIncomingFilter && (
205209
<Grid item xs={12} md={6}>
206-
<AddressBookInput
210+
<AddressInput
207211
data-testid="token-input"
208-
label="Token"
212+
label="Token address"
209213
name={TxFilterFormFieldNames.TOKEN_ADDRESS}
210214
required={false}
211215
fullWidth
@@ -229,7 +233,7 @@ const TxFilterForm = ({ toggleFilter }: { toggleFilter: () => void }): ReactElem
229233
control={control}
230234
rules={{
231235
validate: (val: TxFilterFormState[TxFilterFormFieldNames.NONCE]) => {
232-
if (val.length > 0) {
236+
if (val?.length > 0) {
233237
return validateAmount(val)
234238
}
235239
},

apps/web/src/utils/__tests__/tx-history-filter.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ describe('tx-history-filter', () => {
214214
it('should return incoming filters', () => {
215215
const result = txFilter.parseFormData({
216216
execution_date__gte: new Date('1970-01-01'),
217-
value: '123',
217+
value: '123000000000000000000',
218218
type: 'Incoming' as TxFilterType,
219219
} as TxFilterFormState)
220220

apps/web/src/utils/tx-history-filter.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ export const _isModuleFilter = (filter: TxFilter['filter']): filter is ModuleTxF
4545
return 'module' in filter
4646
}
4747

48+
const NATIVE_DECIMALS = 18
49+
const parseNativeValue = (value: string) => safeParseUnits(value, NATIVE_DECIMALS)?.toString()
50+
const formatNativeValue = (value: string) => safeFormatUnits(value, NATIVE_DECIMALS)
51+
4852
// Spread TxFilter basically
4953
type TxFilterUrlQuery = {
5054
type: TxFilter['type']
@@ -61,6 +65,8 @@ export const txFilter = {
6165
},
6266

6367
parseFormData: ({ type, ...formData }: TxFilterFormState): TxFilter => {
68+
const isMultisig = type === TxFilterType.MULTISIG
69+
6470
const filter: TxFilter['filter'] = _omitNullish({
6571
...formData,
6672
execution_date__gte: formData.execution_date__gte
@@ -69,7 +75,7 @@ export const txFilter = {
6975
execution_date__lte: formData.execution_date__lte
7076
? endOfDay(formData.execution_date__lte).toISOString()
7177
: undefined,
72-
value: formData.value ? safeParseUnits(formData.value, 18)?.toString() : undefined,
78+
value: isMultisig && formData.value ? parseNativeValue(formData.value) : formData.value,
7379
})
7480

7581
return {
@@ -87,13 +93,14 @@ export const txFilter = {
8793

8894
formatFormData: ({ type, filter }: TxFilter): Partial<TxFilterFormState> => {
8995
const isModule = _isModuleFilter(filter)
96+
const isMultisig = type === TxFilterType.MULTISIG
9097

9198
return {
9299
type,
93100
...filter,
94101
execution_date__gte: !isModule && filter.execution_date__gte ? new Date(filter.execution_date__gte) : null,
95102
execution_date__lte: !isModule && filter.execution_date__lte ? new Date(filter.execution_date__lte) : null,
96-
value: !isModule && filter.value ? safeFormatUnits(filter.value, 18)?.toString() : '',
103+
value: isModule ? '' : isMultisig && filter.value ? formatNativeValue(filter.value) : filter.value,
97104
}
98105
},
99106
}

0 commit comments

Comments
 (0)