Set username functionality of the Moralis paypal clone moralis blueprint

#1

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?

#2

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;

#3

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?