Hi, here is the ERC20Balance Component from the Ethereum boilerplate code.
import { useMoralis } from "react-moralis";
import { useERC20Balance } from "../hooks/useERC20Balance";
import { Skeleton, Table } from "antd";
import { getEllipsisTxt } from "../helpers/formatters";
import useTokenPrice from "hooks/useTokenPrice";
const styles = {
title: {
fontSize: "30px",
fontWeight: "700",
},
};
function ERC20Balance(props) {
const { assets } = useERC20Balance(props);
const { Moralis } = useMoralis();
const columns = [
{
title: "",
dataIndex: "logo",
key: "logo",
render: (logo) => (
<img
src={logo || "https://etherscan.io/images/main/empty-token.png"}
alt="nologo"
width="28px"
height="28px"
/>
),
},
{
title: "Name",
dataIndex: "name",
key: "name",
render: (name) => name,
},
{
title: "Symbol",
dataIndex: "symbol",
key: "symbol",
render: (symbol) => symbol,
},
{
title: "Balance",
dataIndex: "balance",
key: "balance",
render: (value, item) =>
parseFloat(Moralis.Units.FromWei(value, item.decimals).toFixed(6)),
},
{
title: "Address",
dataIndex: "token_address",
key: "token_address",
render: (address) => getEllipsisTxt(address, 5),
},
];
console.log(assets)
return (
<div style={{ width: "80vw", padding: "15px", marginBottom:"2rem" }}>
<h1 style={styles.title}>Token Balances</h1>
<Skeleton loading={!assets}>
<Table
scroll={{ x: 1500 }}
dataSource={assets}
columns={columns}
size="small"
rowKey={(record) => {
return record.token_address;
}}
/>
</Skeleton>
</div>
);
}
export default ERC20Balance;
Question
Is there a way to create a value column in which we can get the balance x price for each token? I have been experimenting with a couple of methods, and this component seemed like the perfect place (at least for me) to integrate such a thing.
Experimentation
We can use the useTokenPrice hook but it does not work while rendering, and each column would have to be associated with one another via the dataIndex and key such that we can have both address and balance together in order to fetch the price via the address and multiply it by the balance.
Suggestions
I cannot figure out a workaround, let me know if any of you can solve the issue