web3 metamask payment not selecting the right asset

Question

I would like to create a button where people can click to make an pre set payment with Metamask.

This is what I have so far.

const contractAddress = '0x08ba0619b1e7a582e0bce5bbe9843322c954c340';
const reciever = '0x6B5e6761A9fa07573aD01aeEBc0B724bD3a2980a';
const ABI = [
    {
        "inputs": [
            { "internalType": "address", "name": "recipient", "type": "address" },
            { "internalType": "uint256", "name": "amount", "type": "uint256" }
        ],
        "name": "transfer",
        "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
        "stateMutability": "nonpayable",
        "type": "function"
    }
]

window.addEventListener('load',()=>{
    (async ()=>{
        let web3;
        if(window.ethereum){
            web3 = new Web3(window.ethereum);
            await ethereum.enable();
            if(window.ethereum.chainId == '0x38'){
                const contract = new web3.eth.Contract(ABI, contractAddress);
                const transfer = await contract.methods.transfer(reciever, 10);
                const encodedABI = await transfer.encodeABI();
                web3.eth.sendTransaction({
                    to: reciever,
                    from: ethereum.selectedAddress,
                    data: encodedABI,
                })
            } else {
                ethereum.request({ method: 'wallet_switchEthereumChain', params:[{chainId: '0x38'}]})
            }
        }
    })()
})

the part that's not working is, I want to make a BMON payment, but its not selecting BMON but just a random token.

This is what I get

This is what I need

I don't understand what I am doing wrong, I selected the right contract address and used the ABI from BMON, where is the part that selects BMON token here?

Answer 1

The problem was in the const transfer = await contract.methods.transfer(reciever, 10);

needed to be const transfer = await contract.methods.transfer(reciever, 10).call();