Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix(Tx history filter): incoming amount with decimals #4947

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Fix(Tx history filter): incoming amount with decimals #4947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Fix(Tx history filter): incoming amount with decimals
  • Loading branch information
@katspaugh
katspaugh committed Feb 11, 2025
commit c44fa97597edc12926d61681c4e5d3b2cc89f5f9
14 changes: 9 additions & 5 deletions apps/web/src/components/transactions/TxFilterForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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)
}
},
Expand All @@ -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)'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if "with decimals" is clear enough. Maybe it should say "with zeroes"?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think "with zeros" is clearer because "decimals" suggest a float. We also could add a tooltip explaining it's the "base amount".

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done:
Screenshot 2025-02-11 at 15 25 33

: `Amount (only ${chain?.nativeCurrency.symbol || 'ETH'})`)
}
error={!!fieldState.error}
{...field}
Expand All @@ -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
Expand All @@ -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)
}
},
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/utils/__tests__/tx-history-filter.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
11 changes: 9 additions & 2 deletions apps/web/src/utils/tx-history-filter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Comment on lines +48 to +50
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that this was 18 before but the native currency decimals can be set on the Config Service. Do you think it's worth reading the config instead?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that would be more correct, although a quick google/chatgpt indicates they try to stick to 18. I'll pass decimals from chain info anyway.


// Spread TxFilter basically
type TxFilterUrlQuery = {
type: TxFilter['type']
Expand All @@ -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
Expand All @@ -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 {
Expand All @@ -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,
}
},
}
Expand Down
Loading