I am developing a page to check the tokens a user has in a contract based on the token_id that he types. And by that I mean that the person writes himself the id of the token that he wants to see.
But I am having problems with the code since, when I try to send the token ID, I get the following error:
Also I am facing another problem, and in case someone could help me I will be very grateful. And the problem is that I am trying to avoid the user having to type his wallet, so this page opens from another one where I am passing his wallet address through http request (/page?owner_of=“xxxx”), however I am always getting the error that the address was not defined.
This is the code I am using on the page:
import Moralis from "moralis";
import { useState } from "react";
import { Flex, Button, Text, Input, Select } from "@chakra-ui/react";
function App(context) {
const [tokenid, settokenid] = useState("");
async function CheckUser(context) {
const { query } = context;
console.log(tokenid);
await Moralis.start({ apiKey: '1234567890' });
const response = await Moralis.EvmApi.nft.getNFTTokenIdOwners({
owner_of: query.owner_of,
tokenAddress: '1234567890',
chain: 5,
token_id: tokenid,
});
console.log(response.result);
}
function tokenidChange(e) {
settokenid(e.target.value);
}
return (
<>
<Flex
direction="column"
alignItems="center"
justifyContent="center"
maxwidth="100vw" height="100vh"
>
<Text direction="column" alignItems="center" justifyContent="center" fontSize="6xl" fontWeight="bold">
See Your NFT
</Text>
<Input
placeholder='Token ID'
value={tokenid}
onChange={(e) => tokenidChange(e)}
width='auto'
mt={5}
>
</Input>
<Button direction="column" mt="5" alignItems="center" justifyContent="center" onClick={CheckUser}>
Click Here
</Button>
</Flex>
</>
);
}
export default App;