Connect web app to ERC721 smart contract

Support
1

Hi all,

I am trying to deploy ERC 721 token and I am using ERC721PresetMinterPauserAutoId.sol preset in Remix and MetaMask. I am importing the preset and compiling and deploying (nto changing much in the process).

Now, I would like to connect it with a web app so that the web app can ask information like “who owns a particular token” and throw back result. I am however using API for the first time. I would like to use https://docs.openzeppelin.com/contracts/3.x/api/token/erc721 and fuctions like ownerOf(tokenId). For this, I need to specify the API endpoint, some https:// address that will be able to connect with the ethereum blockchain (or a testnet).
I would like to use API only one way (front-end asking the smart contract, not smart contract reaching to the external world through oracles).

Is there any guide or anything I can (as a beginner) use to guide me through these so that I can use the library of API calls OpenZeppelin provides and basically to set up everything for API connection with front-end?

Thank you for your help

Best regards!

1 Like
2

I think you can use web3.js or ethers.js to call some functions in the contract, for example, when you use web3.js, you can call ERC721Contract.methods.ownerOf(tokenId), or maybe you can use another tool, the subgraphs, but it is a little complex but more flexible.

1 Like
3

Hi @Skyge ,

thank you for your answer. What is then to way to get API connector’s/call’s URL? Is there a way get some link similar to “https://api.etherscan.io/api?module=stats…” for this?

Thanks

1 Like
4

Sorry, I never try to query contract function by API, even though by subgraphs, I just use web3.js and infura to do this.

1 Like
5

Hi @Skyge ,

thank you! I set up an infura account and now I have an address https://ropsten.infura.io/v3/6...a/
Also, I know that I want to use ownerOf(tokenId) function from OpenZeppelin library.
Can you help me connect the dots here? What else do I need to be able to call that function?

Thank you for your help

Best regards!

6

IIRC, if should be:

const Web3 = require("web3");
const provider = new Web3.providers.HttpProvider(`https://${network}.infura.io/v3/${infuraKey}`);
const web3 = new Web3(provider);
const ERC721 = new web3.eth.Contract(contractABI, contractAddress); // Replace your own config
let ownerShip = ERC721.methods.ownerOf(tokenId); // or ERC721.methods.ownerOf(tokenId).call();

console.log("ownerShip", ownerShip);
2 Likes
7

Hi @SolidityDevPrague,

You may want to start with local scripts to get a feel for what you can do: https://docs.openzeppelin.com/learn/deploying-and-interacting#interacting-programmatically

As well as using web3.js you could look at: https://github.com/paulrberg/create-eth-app

1 Like
8

Thank you @Skyge and @abcoathup for your replies!

1 Like