For my university project I am creating an NFT incentive program. When registering a user, they have to enter a first name, username, password etc and a wallet address. For ease of use I have added a 'connect' button to connect a users MetaMask wallet to the website. While this is done, the connect method connects MetaMask and returns the wallet address. Further, 'walletAdd' element is being autofilled to include the returned wallet address. This autofilled value is not being recognised immediately by the forms validation, which is being validated by 'yup' validation. I have to click on the field and do any change as simple as deleting and reinserting the last character of the wallet address before it accepts the field value. Please see my code below and assist me in understanding how to to get the form to accept the autofilled value.
The system is built using VueJs and Spring. The connect function is as follows:
async connect() {
if (window.ethereum) {
await window.ethereum.request({ method: "eth_requestAccounts" }).then(accounts=>{
let account = accounts[0];
console.log(account);
document.getElementById("walletAdd").value = account.toString();
});
window.web3 = new Web3(window.ethereum);
} else {
console.log("No wallet");
}
}
This is the code for the data validation
data() {
const schema = yup.object().shape({
username: yup
.string()
.required("Username is required!")
.min(3, "Must be at least 3 characters!")
.max(20, "Must be maximum 20 characters!"),
firstName: yup
.string()
.required("First Name is required!")
.min(3, "Must be at least 3 characters!")
.max(20, "Must be maximum 20 characters!"),
lastName: yup
.string()
.required("Last Name is required!")
.min(3, "Must be at least 3 characters!")
.max(20, "Must be maximum 20 characters!"),
email: yup
.string()
.required("Email is required!")
.email("Email is invalid!")
//must end with @impact.com
.max(50, "Must be maximum 50 characters!"),
walletAddress: yup
.string()
.required(<>Wallet Address is required. If you do not have one, please create one at metamask.io <br /> </>)
.min(3, "Must be at least 3 characters!")
.max(50, "Must be maximum 20 characters!"),
profilePic: yup
.array(),
password: yup
.string()
.required("Passwords are required to be at least 6 characters long, have uppercase letters, lowercase letters, numbers and special characters.")
.min(6, "Must be at least 6 characters!")
.max(40, "Must be maximum 40 characters!"),
});
return {
successful: false,
loading: false,
message: "",
schema,
};
}
And this is the html code for the wallet address
<div class="form-group">
<label for="walletAddress">Wallet Address</label>
<Field name="walletAddress" type="text" class="form-control" id="walletAdd"/>
<ErrorMessage name="walletAddress" class="error-feedback" />
<input class="btn btn-lg col-4 btn-outline-dark " style=" margin-top: 10px; width: 150px; max-height: 40px; font-size: 15px" type="button" value="Connect Wallet" @click="connect" >
</div>