Assuming you are using React in the front-end,you can use the serialization library created by emurgo.After installing their library you first connect to a wallet like this. I will be connecting to a yoroi wallet , for any other wallet you can just swap out the name and it works same way.
import {Value} from "@emurgo/cardano-serialization-lib-asmjs"
let Buffer = require('buffer/').Buffer
const [balance,setBalance] = useState()
let API = ""
const connectToWallet = async () =>{
try {
API = await window.cardano.yoroi.enable();
} catch(err) {
console.log(err);
}
}
After you enable it , it will return a api key. You can then use the API key to get the balance of wallet.
getBalance = async () => {
try {
const balanceCBORHex = await API.getBalance();
const balance = Value.from_bytes(Buffer.from(balanceCBORHex, "hex")).coin().to_str();
setBalance(balance)
} catch (err) {
console.log(err)
}
}