Instagram to NFT service — SaaS tutorial Part 2|2. Creating NFTs from IG posts.
Welcome!
In the first part, we’ve covered only a portion of this project: the Instagram API integration. There were lots of clicking and setting up, but not that much coding, which was obviously a shame.
In today’s article, this will change!
Let’s continue our journey to create a CocoNFT clone, a service that allows you to connect your Instagram and mint your posts as NFTs. Today, we are going to work on the process of creating NFT’s out of the Instagram posts.
Table of contents:
- Setting up a connector
- Creating a SdkWalletConnector wrapper
- Creating an SDKContext
- Wrapping an app in SdkWalletConnector as well as in an SDKContext
- Using an SDK to mint an NFT
Setting up a connector
When it comes to the `connector-setup.tsx` file, there aren’t many changes you’ll need to perform. It’s important, though, to know what’s happening. In this file, we set up available wallets. All available providers and their implementation can be found here. I’ve included just the Metamask and FCL wallet for the sake of simplicity. The most critical variable in this file is a “connector”, which allows us to connect to the desired wallets. As you can see, we create it with injected and state variables, and then, in case we want to add other options, we call add on the method chain. Summing it up, I think that it’s safe to say that we use a connector only to initialize wallet implementations and export them so that we can use them elsewhere.
Creating SdkWalletConnector Wrapper
In the SdkWalletConnector element, the most important is an if statement. Here, we can control what we display in different connection statuses. For example, if the connection status is either disconnected or connecting, we display the option’s element, which is responsible for showing the wallet connect buttons. It’s essential to remember that we will wrap a whole app in this element because we want to have access to the SDK in every place. This means that the child element which we’re passing as an argument is basically the page.
Let’s have a short recap of what we’ve gone through so far. If the connection status is either “disconnected” or “connecting” on the screen, we’ll see only the connect buttons because we’re not displaying the child element here.
The option element is pretty simple. We take all we added to connector wallets (what we added to Connector.create(injected, state). add(fcl) ), and iterate through them. If you would like to create a unique button style for every wallet, you should use the “option” key from objects, which we get back from the connector.getOptions() function.
Going back to the if statement, in case we manage to successfully connect to the wallet, we create an SDK and display a disconnect button in accordance with the child element, which is our page.
Creating SDKContext
Since we want to be able to use SDK on every page, we elevate the possibilities that React gave us and create a context object.
Wrapping an app in a SdkWalletConnector as well as in an SDKContext
It’s time to put everything we’ve already created in place. First, we wrap the whole app in a SdkWalletConnector, since it’s the element that creates an SDK for us. After that, we pass the SDKContext which allows us to use the SDK out of the box in all of our pages. Then, we simply pass a Component element.
Using an SDK to mint an NFT
If you had the chance to read my previous article/articles, this part will probably look familiar to you. Let’s start the coding journey once again! Since this article is only dedicated to the NFT creation part, we won’t cover the code from the first part.
First and foremost, we need an IPFS connection in order to be able to save our NFT on IPFS.
The process of adding data to IPFS is pretty straightforward. We’ll connect to the appropriate node (we use the infura one in this example). Then, we just wait for the add method. In the return statement, we need to append “ipfs:/” to the beginning since it’s the required format.
In this step, we do as follows:
- Save post details on IPFS, and get its URI/CID address back;
- Define rarible smart contract on rinkeby address;
- Prepare mint request;
- Call sdk.nft.mint method with previously defined mintRequest as an argument, from the response you can also get additional info about minting possibilities such as: is lazy minting enabled?, or is multiple minting enabled?;
- Submit the response (this line will open a Metamask window, so you can sign your transaction, it’s cost-free).
Result?
Freshly created NFT!
If you want to check out your NFT, remember to use
https://rinkeby.rarible.com/token/{contractAddress}:{tokenId}
as a URL. For my specific example, it is:
Summing it up
In this two-part series, we created a service that allows users to connect their Metamask wallet, as well as an Instagram account, and create an NFT out of their posts. We configured an Instagram app on Facebook for Developers, authorized our users, fetched their posts, and finally, we’ve created an NFT out of that. Impressive stuff, I have to say. ✨
My main goal was to show you that you can build creative stuff without a super complicated code structure. You just have to use the right tools.
Wow…I feel like C++ Socrates after that quote. Anyway, below you can find all the needed links, like GitHub project URL, discord where you can ask questions about the Rarible Protocol SDK, and my Twitter/Discord info in case you’d want to contact me personally and ask some questions. Feel free to do it.
Happy coding!
GitHub Repo: https://github.com/kolberszymon/nftig
If you have any further questions, we are always ready to help you! Join our discord, and we will provide the support you need!
Rarible Protocol discord: https://discord.com/invite/zqsZsEWBbN
Consider subscribing to our weekly newsletter: https://raribledao.substack.com/
My personal contact information:
Discord: Szymon From Poland#6093
GitHub: kolberszymon
LinkedIn: kolberszymon
