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,