Problem metamask pop up on Moralis.transfer

Technical Issue Reporting
#1

Hi, i use ethereum boiler plate & make donate BNB button on bsc mainnet network, but the pop up not showing.

heres the code :

import { Button, notification } from "antd";
import { useEffect, useState } from "react";
import { useMoralis } from "react-moralis";

const styles = {
  card: {
    alignItems: "center",
    width: "100%",
  },
  header: {
    textAlign: "center",
  },
  input: {
    width: "100%",
    outline: "none",
    fontSize: "16px",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textverflow: "ellipsis",
    appearance: "textfield",
    color: "#041836",
    fontWeight: "700",
    border: "none",
    backgroundColor: "transparent",
  },
  select: {
    marginTop: "20px" ,
    display: "flex",
    alignItems: "center",
  },
  textWrapper: { maxWidth: "80px", width: "100%" },
  row: {
    display: "flex",
    alignItems: "center",
    gap: "10px",
    flexDirection: "row",
  },
};

function Transfer() {
  const [receiver] = "0xc98a2ec1a07f1b743e94896a52434c4c6a0kec15";
  const [amount] = "0.1";
  const { Moralis } = useMoralis();
  const [asset] = useState();
  const [tx, setTx] = useState();
  const [isPending, setIsPending] = useState(false);

  useEffect(() => {
    asset && amount && receiver ? setTx({ amount, receiver, asset }) : setTx();
  }, [asset, amount, receiver]);

  const openNotification = ({ message, description }) => {
    notification.open({
      placement: "bottomRight",
      message,
      description,
      onClick: () => {
        console.log("Notification Clicked!");
      },
    });
  };

  async function transfer() {
    let options = {
      functionName: "transfer",
      abi: [
        {
          "constant": false,
          "inputs": [
            { "internalType": "address", "name": "recipient", "type": "address" },
            { "internalType": "uint256", "name": "amount", "type": "uint256" }
          ],
          "name": "transfer",
          "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
          "payable": false,
          "stateMutability": "nonpayable",
          "type": "function"
        },
      ],
      params: {
        recipient: "0xc98a2ec1a07f1b743e94896a52434c4c6a0kec15",
        amount: Moralis.Units.ETH(0.1),
      },
    }

    setIsPending(true);
    const txStatus = await Moralis.transfer(options);

    txStatus
      .on("transactionHash", (hash) => {
        openNotification({
          message: "🔊 New Transaction",
          description: `${hash}`,
        });
        console.log("🔊 New Transaction", hash);
      })
      .on("receipt", (receipt) => {
        openNotification({
          message: "📃 New Receipt",
          description: `${receipt.transactionHash}`,
        });
        console.log("🔊 New Receipt: ", receipt);
        setIsPending(false);
      })
      .on("error", (error) => {
        openNotification({
          message: "📃 Error",
          description: `${error.message}`,
        });
        console.error(error);
        setIsPending(false);
      });
  }

  return (
    <div style={styles.card}>
      <div style={styles.tranfer}>
        <div style={styles.select}>
          <div style={styles.textWrapper}>
          </div>
        </div>
        <Button
          type="primary"
          size="large"
          loading={isPending}
          style={{ width: "100%", marginTop: "25px" }}
          onClick={() => transfer()}
          disabled={!tx}
        >
          Donate 0.1 BNB
        </Button>
      </div>
    </div>
  );
}

export default Transfer;

the error is :

Desain tanpa judul(12)
Desain tanpa judul(12)900×800 131 KB


is there something i missed?

#2

You need to correct your options, see the docs here: Transfer ETH - Moralis

1 Like
#4

thank you its working, but the gas fees to high. how to set to low gas fees?

#5

The gas will be set automatically so it should be fine. You can check the average gas here. You can try setting it lower in your wallet.

1 Like
#6

i forget to add bnb on wallet :sweat_smile: thank you glad, i love moralis :heart:

#7

i got problem txStatus after sending BNB

code :

function Transfer() {
  const { Moralis } = useMoralis();
  const [receiver] = useState();
  const [asset] = useState();
  const [tx, setTx] = useState();
  const [amount] = useState();
  const [isPending, setIsPending] = useState(false);

  useEffect(() => {
    asset && amount && receiver ? setTx({ amount, receiver, asset }) : setTx();
  }, [asset, amount, receiver]);

  const openNotification = ({ message, description }) => {
    notification.open({
      placement: "bottomRight",
      message,
      description,
      onClick: () => {
        console.log("Notification Clicked!");
      },
    });
  };

  async function transfer() {
    let options = {
      functionName: "transfer",
      // sending 0.1 ETH
  type: "native",
  amount: Moralis.Units.ETH("0.0001"),
  receiver: "0xb63add5c5533cd7594ca8adc98fc4659ffd4a81d",
    }

    setIsPending(true);
    const txStatus = await Moralis.transfer(options);

    await txStatus
      .wait("transactionHash", (hash) => {
        openNotification({
          message: "🔊 New Transaction",
          description: `${hash}`,
        });
        console.log("🔊 New Transaction", hash);
      })
      .wait("receipt", (receipt) => {
        openNotification({
          message: "📃 New Receipt",
          description: `${receipt.transactionHash}`,
        });
        console.log("🔊 New Receipt: ", receipt);
        setIsPending(false);
      })
      .wait("error", (error) => {
        openNotification({
          message: "📃 Error",
          description: `${error.message}`,
        });
        console.error(error);
        setIsPending(false);
      });
  }

the error:

Desain tanpa judul(12)
Desain tanpa judul(12)900×800 131 KB

what should i do to get notification status after complete transfer?

#8

Those methods are not available as Moralis uses ethers.js, read this on handling the transaction response: https://docs.moralis.io/moralis-dapp/sending-assets/resolve-transfer

If you want to do things with that syntax, you will need to use web3.js directly instead of Moralis.transfer.

#9

what should i change for enable the tx notification?

#10

maybe the syntax here is txStatus.on("transactionHash"