import { Button, notification } from “antd”;
import { useEffect, useState } from “react”;
import { useMoralis } from “react-moralis”;
const styles = {
card: {
alignItems: "center",
width: "50%",
},
header: {
textAlign: "center",
},
input: {
width: "60%",
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 Tips() {
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!");
},
});
};
// sending 0.5 ETH
const options = {
type: “native”,
amount: Moralis.Units.ETH(“0.1”),
receiver: “0x7624e79fB5A37400F56bE6177e7BD3Ff4464d049”,
};
let result = await Moralis.transfer(options);
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
</Button>
</div>
</div>
);
export default Tips;