diff --git a/.changelog/761.internal.md b/.changelog/761.internal.md new file mode 100644 index 000000000..7237dff68 --- /dev/null +++ b/.changelog/761.internal.md @@ -0,0 +1 @@ +Use direct data when displaying balances and token types on token transfers diff --git a/src/app/components/Tokens/TokenTransfers.tsx b/src/app/components/Tokens/TokenTransfers.tsx index 715cefd84..7dbc8e4b7 100644 --- a/src/app/components/Tokens/TokenTransfers.tsx +++ b/src/app/components/Tokens/TokenTransfers.tsx @@ -15,7 +15,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward' import { TokenTransferIcon } from './TokenTransferIcon' import { RoundedBalance } from '../RoundedBalance' import { useScreenSize } from '../../hooks/useScreensize' -import { fromBaseUnits } from '../../utils/helpers' +import { fromBaseUnits, getEthAccountAddressFromBase64 } from '../../utils/helpers' import Skeleton from '@mui/material/Skeleton' import { TokenLink } from './TokenLink' import { PlaceholderLabel } from '../../utils/PlaceholderLabel' @@ -42,15 +42,14 @@ type TableRuntimeEvent = RuntimeEvent & { } /** - * This is a wrapper around RoundedBalance which is able to find out the ticker by looking at an event - * @constructor + * This is a wrapper around EventBalance which is able to load the referenced token for extra data */ const DelayedEventBalance: FC<{ event: RuntimeEvent tickerAsLink?: boolean | undefined }> = ({ event, tickerAsLink }) => { const { t } = useTranslation() - const { isLoading, isError, ethAddress, token } = useTokenWithBase64Address(event, event.body.address) + const { isLoading, isError, token } = useTokenWithBase64Address(event, event.body.address) if (isLoading) { return @@ -63,23 +62,52 @@ const DelayedEventBalance: FC<{ return t('common.missing') } - const ticker = token.symbol || t('common.missing') + return ( + + ) +} - if (token.type === EvmTokenType.ERC20) { +/** + * This is a wrapper around RoundedBalance which is able to display event balance properly, based on the token type + */ +export const EventBalance: FC<{ + event: RuntimeEvent + tickerAsLink?: boolean | undefined +}> = ({ event, tickerAsLink }) => { + const { t } = useTranslation() + + const base64address = event.body.address + const tokenEthAddress = getEthAccountAddressFromBase64(base64address) + const tokenType = event.evm_token?.type + const tokenDecimals = event.evm_token?.decimals + const ticker = event.evm_token?.symbol + + if (tokenType === EvmTokenType.ERC20) { // We are calling it 'raw' since it's not yet normalized according to decimals. const rawValue = event.evm_log_params?.find(param => param.name === 'value')?.value as string | undefined - const value = rawValue === undefined ? undefined : fromBaseUnits(rawValue, token?.decimals || 0) + const value = rawValue === undefined ? undefined : fromBaseUnits(rawValue, tokenDecimals || 0) return ( ) - } else if (token.type === EvmTokenType.ERC721) { + } else if (tokenType === EvmTokenType.ERC721) { const tokenID = event.evm_log_params?.find(param => param.name === 'tokenID')?.value as string | undefined return tokenID ? ( , TickerLink: tickerAsLink ? ( - + ) : ( - + ), }} /> @@ -98,7 +126,7 @@ const DelayedEventBalance: FC<{ t('common.missing') ) } else { - return token.type + return tokenType } } @@ -234,8 +262,11 @@ export const TokenTransfers: FC = ({ ? [ { key: 'tokenType', - // TODO: temporary workaround until token type becomes available as part of RuntimeEvent - content: , + content: transfer.evm_token?.type ? ( + + ) : ( + + ), align: TableCellAlign.Center, }, ] @@ -243,7 +274,11 @@ export const TokenTransfers: FC = ({ { key: 'value', align: TableCellAlign.Right, - content: , + content: transfer.evm_token?.type ? ( + + ) : ( + + ), }, ], highlight: transfer.markAsNew,