[solved] Single token balance and ETH price

#1

Hi, sorry to bother with such a simple question, was able to easily pull ETH holdings using this code provided in Moralis Docs. Wondering if there is a similar way to pull an erc20 single token balance as well as current ETH price.

import { useEvmNativeBalance } from '@moralisweb3/next';

function HomePage() {
    const address = '0x1...';
    const { data: nativeBalance } = useEvmNativeBalance({ address });
    return (
        <div>
            <h3>Wallet: {address}</h3>
            <h3>Native Balance: {nativeBalance?.balance.ether} ETH</h3>
        </div>
    );
}

export default HomePage;
#2

for erc20 balances:

for token price:

you will have to use weth (wrapped eth) contract address for eth

#3

For the token balances already have this code running and working, its pulling all tokens from the wallet logged in but not sure how to display just one of them when the user logs in. Would like it on this page

import styles from "../styles/Home.module.css";
import TableHeader from "./tableHeader";
import TableContent from "./tableContent";
import { useEvmNativeBalance } from '@moralisweb3/next';
import { useAccount } from "wagmi";

export default function LoggedIn() {
  const { address } = useAccount();
  const { data: nativeBalance } = useEvmNativeBalance({ address });
 
    return (

      <section className={styles.loggedIn_container}>
        <h3>Native Balance: {nativeBalance?.balance.ether}  ETH</h3>
      </section>   
    );
  }
#4

what do you mean with just one?

what I pasted is not for native balance, for erc20 balance is a different endpoint

#5

I understand, right now im showing matic, link, dot, near, wondering if there is a way to display just Matic rather than all of them

#6

In the tutorial i found this code, but not sure how to make it so that only Matic shows up rather than all the tokens in my wallet

import axios from "axios";
import { useEffect, useState } from "react";
import { useAccount } from "wagmi";
import Card from "./card.js";

export default function GetWalletTokens() {
  const [tokens, setTokens] = useState([]);
  const { address } = useAccount();

  useEffect(() => {
    let response;
    async function getData() {
      response = await axios
        .get(`http://localhost:5001/gettokens`, {
          params: { address },
        })
        .then((response) => {
          console.log(response.data);
          setTokens(response.data);
        });
    }
    getData();
  }, []);

  return (
    <section>
      {tokens.map((token) => {
        return (
          token.usdPrice && (
            <Card
              token={token}
              total={tokens[3]}
              key={token.walletBalance?.symbol}          
            />
          )
        );
      })}
    </section>
  );
}
#7

the question is about how to show only a part of the results, as in you have the results but you want to show in the interface only a part of the results?

or is a question about how to use the API in order to get the results in the first place?

#8

how to show only part of the result, API is working perfectly

#9

maybe that

can be modified, or the data before is sent to setTokens

#10

Thank you, we can close it, it worked

1 Like