With the Fuels dependency set up, you can now create a React component that will connect to the Fuel provider and retrieve the base asset balance for a given wallet address. Here's an example of how to do this:
import { BN, Provider, Wallet } from "fuels";
import { useEffect, useState } from "react";
function App() {
const [balance, setBalance] = useState(0);
useEffect(() => {
async () => {
const provider = await Provider.create("https://testnet.fuel.network/v1/graphql");
const myWallet = Wallet.fromAddress("0x...", provider);
myWallet.getBalances().then((data) => {
setBalance(new BN(data[0].amount).toNumber());
});
}()
}, []);
return <div>My Balance: {balance}</div>;
}
export default App;For a quick test or just playing around, you can load it in your Web Apps straight from our CDN.
<script type="module">
import {
Wallet,
Provider,
} from "https://cdnjs.cloudflare.com/ajax/libs/fuels/0.97.0/browser.mjs";
const exec = async () => {
const provider = await Provider.create(
"https://testnet.fuel.network/v1/graphql",
);
const { name } = provider.getChain();
console.log(name);
};
exec();
</script>