I need help in creating front end function to update the set username button.
have tried but getting a lot of errors. can any one help me regarding the set username using the addName function of the smart contract?
below is my code which i was trying to implement.
import React, { useState, useEffect } from “react”;
import { Card, Modal, Input, Button } from “antd”;
import { UserOutlined } from “@ant-design/icons”;
import matic from “…/matic.png”;
import { usePrepareContractWrite, useContractWrite, useWaitForTransaction } from “wagmi”;
import { polygonMumbai } from “@wagmi/chains”;
import ABI from “…/abi.json”;
function AccountDetails({ address, name, balance }) {
const [isModalVisible, setIsModalVisible] = useState(false);
const [username, setUsername] = useState("");
const { config } = usePrepareContractWrite({
chainId: polygonMumbai.id,
address: "0xa45B598B831191bb2b4ae3dB2fE4a6b14E0E463e",
abi: ABI,
functionName: "addName",
args: [username],
overrides: {
value: String(name["0"]),
},
});
const { write, data } = useContractWrite(config);
const { isSuccess } = useWaitForTransaction({
hash: data?.hash,
});
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = () => {
write?.(); // Call the addName function
setIsModalVisible(false);
};
const handleCancel = () => {
setIsModalVisible(false);
};
const handleInputChange = (e) => {
setUsername(e.target.value);
};
useEffect(() => {
if (isSuccess) {
name();
address();
balance();
}
}, [isSuccess, name, address, balance]);
return (
<Card title="Account Details" style={{ width: "100%" }}>
<div className="accountDetailRow">
<UserOutlined style={{ color: "#767676", fontSize: "25px" }} />
<div>
<div className="accountDetailHead">{name}</div>
<div className="accountDetailBody">
{" "}
Address: {address.slice(0, 4)}...{address.slice(38)}
</div>
</div>
</div>
<div className="accountDetailRow">
<img src={matic} alt="maticLogo" width={25} />
<div>
<div className="accountDetailHead"> Native Matic Tokens</div>
<div className="accountDetailBody">{balance} Matic</div>
</div>
</div>
<div className="balanceOptions">
<div className="extraOption">
<div>
<Button type="primary" onClick={showModal}>
Set Username
</Button>
</div>
<Modal
title="Set Username"
visible={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
>
<Input
placeholder="Enter username"
value={username}
onChange={handleInputChange}
/>
</Modal>
</div>
<div className="extraOption">Switch Accounts</div>
</div>
</Card>
);
}
export default AccountDetails;
Hi @r0ushann
Please format your code as shown in this post so it is easy to read it.
Can you also share what errors you are seeing when you are testing?