Solana NFT Creation: Metaplex SDK Guide

[00:00:00]all right guys before we get started on the video quick update on the channel and me um for a bit I was working at a company called Genesis uh as a full stack developer Genesis is a crypto trading firm um but anyway I left there and now I'm at a startup doing uh Solana program development for a text that they're building so the kind of sporadic videos and stuff like that is because I've been busy with all of that stuff so let's continue with the video okay guys so we're going to continue our introduction to Solana by going into I guess the next natural step which is nfts and we're going to take a look at the metaplex SDK the JavaScript SDK I'm going to show you some working code I'm going to also show you something probably even more important than the code itself which is a lot of gotchas that um made some of this stuff just simply not work as it was supposed to but having said that before I continue if you don't know Solana already at least some of the basics of programming on Solana I would suggest taking a look at my Solana videos three existing ones I'm gonna put a link in the description so first of all real quick what is an nft an nft is just a single custom token that represents an asset so normally when you have a token on a blockchain you're going to have some arbitrary number of you know the same token right a million tokens a billion tokens whatever but in the case of an nft it's really not complicated all you're doing is you're saying that there's only going to be one single issuance of the token and it's going to have zero decimal places so then where does or how does metaplex um fall into this so you create the token the custom mint and the token itself via just plain vanilla Solana but uh what metaplex gives you um and you can tell this by the name is it gives you all of the descriptors and all of the extra kind of data about the data um about the token the nft token um that is peripheral to the Token itself but very necessary so for example it could be as simple as the name itself but it could also be as important as um where the content information Associated to this nft exists on so in the case of Solana the reason why that's so important is because Solana isn't a blockchain for storing data so it's not really intended for you to put um videos uh large images stuff like that um even if it's relevant to your nft on to Solana Solana is more about fast and cheap processing so 99 of the time if you have any significant size data you're gonna probably be putting it on something like our weave um and you're going to be pointing to it from Solana so um the metadata system in metaplex is providing a lot of Helper and utility functions to allow you to do that first of all more easily with their API but also in a very standardized way so that all the NF nfts on their ecosystem can basically look alike and you can expect that you know certain fields are always going to be there Etc in other words standardization so um the metadata portion of the token is going to be listing this information as you see here some of the more important ones are again the URL pointing to the actual content data but also if need be um some of the creators and the fees that they can partake in should the nft be sold again uh what percentages they can get basically stuff like that so you have the creators list and other information related to that but in addition what this URI does is it points to an actual Json file so again this file is not going to be saved on Solana it's usually going to be saved you know on our weave or ipfs or even in the case of certain projects like openc they're saved they might be saved on a centralized database but anyway um the Json is going to have sort of the metadata that is not uh so specific to Solana but is more targeted to the contents of the nft itself so you have all of this information but um some of the the big ones are going to be you know wear that image because you know most of the nfts nowadays are are just images right but um where that image is is stored so in this case again it's on our weave but you know it's up to you you can store it wherever you want but obviously having it on a decentralized store uh makes a lot of sense for web3 there are also many other standardized sort of um fields that might be custom and important to your nft and your nft community so certain Uh custom attributes and then of course additional files that might be tied to your nft so although currently most nfts are just you know some image you know the monkeys the the Penguins whatever it may be but a lot of nfts are coming out for music for um videos stuff like that so you can put related files in here and then on top of that I am using this properties field to put in my own custom fields and custom data in here specific to my needs and you can do that as well so um in reality I mean a lot of people get confused about metaplex but there's really not that much to it at its core as again as the name implies it's about metadata and sorting storing metadata in a standardized way that's reliable and consistent now on top of that I think maybe part of the confusion is you've seen things about candy machine and auctions and stuff like that those are kind of more peripheral things that are definitely important so candy machine is about you know selling one-off nfts and auctions is about auctioning nfts and stuff like that but these are just you know more detail type stuff you could obviously not use either of these and customize your own and you would still have a standardized um nft with uh the metadata that people would expect if you're using metaplex so I think um to avoid confusion just uh unless you really need these items just ignore those and focus on just getting um how should I say again a standardized nft out in the Solana ecosystem and then you can move on from there you know according to whatever your needs are all right so let's start looking at some code uh now before I go through this I want to explain a couple of things so as you can see this is my D chat repository it's a turbo repo so it's a mono repo um I am using and I mentioned this in my Twitter but I have decided to switch to using something called Tory so Tori is a native um application Builder currently it only works for desktops but eventually they're going to make a version for IOS and Android so I'm going to be able to build a single app and deploy to all major platforms but it's also um because it has a native component written in Rust there's uh quite a a chunk of the app that is very performant because of the the native code that is inside of it but at the same time on the client side I can just use regular uh npm packages and in my case I'm using react and a bundler called Veet VJs because it's it just is much faster at building than create react app so um so that's this project right here and the reason why I'm bringing this up is when you guys create if you decide to go with Tori but actually even if you don't decide to go with Tori and you just decide to go with vanilla uh create react app or veed or any of the other bundlers and packages out there what's going to happen is a lot of these metaplex and even the bundler related calls they're gonna fail and the reason why that is happening is because um internally these sdks instead of using browser apis they're actually using node apis and since if you're building with react view spelled whatever um you know these are browser-based Frameworks even in the case of Tori again I'm building kind of a shell UI with react which is running in a web view even though the rest of the application is a native you know application so um this stuff is uh these sdks from Solana are expecting certain node um apis to exist so process buffer um you know whatever crypto blah blah blah um so a lot of stuff when you set it up everything seems to be set up correctly it's just gonna fail so in this portion of the video I'm going to show you the code how I set everything up but also how to get around all of these errors that inevitably you're gonna you're gonna run into so the first thing that I did is I wanted to break up you know my code separation of concerns all that stuff so this is the piece that handles the metaplex um specific uh nft metadata and nft creation portion and then this is the portion that connects to bundler um and if you're not familiar with our weave so I am going to be saving my images my um uh so let me back up real quick D chat is a social network app it's like Twitter Instagram kind of a hybrid of both so you can post messages and images and stuff like that so all of that data is going to be saved as an nft from dchat and I have chosen um the larger data again the images um text post whatever to be saved on our weave um so I'm using bundler to do that because it allows integration with Solana wallets so the app will only need a single wallet as opposed to needing a Solana wallet and an RV wallet uh bundler supports sold tokens and just does a conversion behind the scenes so that's super helpful I think for user experience so I'm going with bundler uh but I wanted to separate that code out so that they're distinct and I can manage them separately in addition to that um the bundler code has uh what I would consider a bug inside of it again having to do with the whole node polyfill stuff so although and the reason why I'm bringing this up is although metaplex has built within it helpers that will allow you to stay in the metaplex SDK ecosystem and just make calls to bundler from there um with stuff like upload metadata um this guy right here two metaplex file from browsers so this will allow you to upload into our weave um assuming that's your chosen back end into our weave the file that you have and then the upload metadata is creating that Json file that we saw earlier um you know with the right uh fields in there automatically for you so if that piece worked it would have been great and really streamlined and smooth but it wasn't working because uh there were some issues uh in the bundler API which we're going to get into so first of all let's start from the top uh these are the main uh Solana sdks that you're going to need so the regular web 3 SDK so this makes the connection this allows you to manage key pairs pick whichever cluster that you're going to be on so devnet test net mainnet all that good stuff in our case since we're testing we're going to be on devnet both on Solana and bundler um so that's that and then in here is where you have all of the metaplex nft metadata specific stuff so this thing let's drill into the code so by the way I'm doing it this way as opposed to typing because I think it saves time um and I know for a fact that everything here works as opposed to typing something having it not work fail having to fix it you know and wasting a bunch of time doing that so anyway uh obviously this is the Constructor it expects um a dependency injected implementation of the data service which again is going to be bundler and then in this case this is a native desktop application in this case eventually when I build the mobile apps they're going to be using um whatever wallet apps are on the phone so Phantom you know Soul flare whatever it may be um so then if you drill down into the Constructor we first make a connection we determine whether we're on development or not and then choose the appropriate cluster um and then after that we have to ins instantiate all of the objects necessary to make mediplex work so in this case we take that connection object from Solana web3 and then we basically create a metaplex object out of it but in order to do that we have to indicate what type of wallet that we're using so in this case key pair identity means that basically I used the wallet Json file I converted it into a key pair object and I'm passing it in so in the case of if you're using one of the uh the wallets and the wallet apis meaning the Solana Mobile Wallet Solana wallet adapters then there's a separate API that you can make API call that you can make to interface to those types of wallets so in this case um like I said I'm using bundler uh I don't actually need this because like I said I had to bypass um the metaplex's instantiation of bundler for the node polyfill issues so this can be removed but I'm I'm putting it here to indicate that if you're in an in an environment that doesn't cause those issues then you do have to pass this in if you're going to use bundler so then the current function that I have implemented is a function that is posting an isolated message so I'm not doing a response I'm not doing a retweet or a resend I'm just posting you know some message in isolation so the way that I'm doing that is of course I have some related information and this function isn't uh completely finished yet so I I'm not passing in a physical file yet but what I'm doing is first of all I'm creating the metaplex Json object so again that would be um this data right here and I don't need most of the data so a lot of the data I'm just leaving out but in my case I'm using the properties field again and having its own content field and putting the user's text message in there and then I'm putting in a name over time as I flesh this out I'm going to add more Fields as relevant of course once I start using the file I'm going to use the um I'm going to use this field but I haven't gotten that far yet but you know I will I will fit that in here so once I do that I create a blob out of that Json file and I pass it to the bundler data service again I'm not using upload metadata to do this because it wasn't working and then when we get to this function I will explain why so then after I do that assuming this call goes through successfully now I have an actual Json metadata file that is existing inside of ourweave.net and then I'm able to use it to create um an nft via metaplex so again I give it the name I give it the URI to wherever that Json file is which again in our case is our weave and then I'm not doing any seller fee basis points these are the fees that the original creators can get when they're um when the nft is being sold in so this is just for getting uh errors um and logging them like I said before I was having a lot of issues uh with this so if we go to the app and I pre-loaded this and this is all just test data so I'm just going to click it but if we wait for the response we should see the json's txid and then we should also see some of the data specific to the nft itself um today it's kind of slow usually it's not this low so if we open this up actually let me close this for a moment so here you can see Json the username that I'm using is user a and then I have the Unix timestamp and then of course there is a lot of data specific to the nft itself including the mentor of the nft and other information so okay so this is not that hard right you know dot create or dot upload metadata like what is the big deal here so again the Solana's apis tend to use a lot of node API calls buffer stream process whatever um the trend nowadays in these bundlers package creators whatever you want to call them is to push towards using browser apis and standardize on browser apis and that makes a lot of sense because if you're on the browser there is no node so there's really no reason why you have to call into node especially since some of the calls aren't even for security reasons allowed on the browser anyway like you can't directly access the file system um you know from a browser app so having said that the Solana apis still make heavy use of node apis so if you're using V right and the information that I'm giving you is specific to V it's slightly different for create react app um and I'm sure it's different for other builders but for Veet you first have to install um these packages right so these are going to give you the polyfills and then I know we're at the top but let's start at the bottom here so in order to fill in things like the buffer object you would need to do this right under optimize dependencies um in my case I am using ES next although I believe currently Tori only supports up to es2021 but I did have some issues trying to use es2021 so I just went with es next um but what I'm saying is you do need a bare minimum es version of I believe es2020 in order for some of these calls to work like for example um bigint I think actually in the case of bigint you need es2021 to make that work and in a couple of the calls they actually did use big int so that's why I ended up just saying screw it let me go with the latest one and I did the update to es next so on top of that inside of the build settings I'm targeting again es next and then inside of roll-ups I'm targeting crypto and uh crypto is a separate package crypto browserify so make sure in the resolve section under aliases you have at least all of these in place so that when some dependency of some other dependency you know decides to to call something it's not going to just blow up so you need all of these pieces in place including the packages and then finally on top of all that you also need and make sure this is there this was here when I um first created this project but uh I think on some older versions it might not be but on top of all of that you're also going to you're also going to require the global this so in a browser app you can basically think of global this as window but in the case of node uh they're sort of kind of isn't one so you need a global this which is basically the the node process or the node the root node object um and that's what this is going to give you so assuming you have all of those polyfills in place um all of the metadata metaplex code should then be able to run without any issues so then let's move on to this call right here so then again why couldn't I use upload metadata why did I have to switch to this so in the case of bundler they actually have two versions so they I think they early on they realized this issue with the node versus the browser apis so they actually did make um two kind of versions of their API one that is using node one that is not using node that's using you know the browser-based apis but the problem is internally metaplex's bundler implementation uses the node version so um in doing so the uh certain things basically don't work that's that's the bottom line right so in effect certain things don't work because like I said even if you're using the polyfills and you have everything in place and all of the polyfill packages and all of the the little pointers that are required and the aliases and all of that business there are certain calls that are not allowed for security reasons and sandboxing within the browser context it simply won't allow you to do it so certain calls to path and Fs are going to fail so what you need to do is um again don't use the metaplex bundler call upload metadata um and instead you're gonna have to create your own service um and you're going to use the non-node version which is this but in order to do that you're going to have to manually configure a lot of the fields and a lot of the configurations um instead of the normal action which is just to make the single uh new bundler call you're gonna have to do additional work basically so let's go through what that is so first of all you know we have our bundler instance we're going to get the um the id.json file for the Solana wallet I realize that it's not called jwk but I'm just keeping the the names that they have um in the bundler docs just to you know keep things consistent but um you do have to create the instance and kind of fill it in with some of the base information so in this case it would be whichever bundler URL that you are using and in my case I have a native app so I can use tat EMV if I want to um just realize that in Veet you have to prefix with v to underscore in order for the system to allow you to um have variables that are usable so anyway I have this going to devnet so I'm telling bundler I'm going to use devnet then I'm going to use the currency of Solana and not our weave which means that it will recognize this as a Solana wallet and then I'm using the Solana devnet cluster right APA API Dot devnet and then that's the basic uh configuration so then on top of that again I have to do a little bit extra work which is to create a customized version of Solana config which is the under under the covers configuration that the bundler is using so again Solana the ticker of the token is soul the URL the wallet blah blah blah so then on top of that there's certain fields that must be manually updated so as you can see these are all related to configuration of various sorts but every single one of them is necessary so then once I'm done doing that then I take my regular um classes bundler object it's now complete ready to go and then I set that right here so that when this call is made um the call goes to here and this top bundler is ready to go so um what is it that I'm doing in this call to bundler so the first thing that I need to do is I need to fund bundler so that it will you know pay for the transaction that bundler is about to do just like any other network right but in order to pay I need to know um the size of the data that I'm looking to upload onto our weave right so this bundler call is going to do that based upon the bite size not the array length so you take the file which is a blob and you get the size out of it that gives you the price and then you're going to fund that much um into the bundler nodes again bundler will Auto convert your souls into our weave so you don't need to deal with any of that stuff which is part of the benefit of using bundler so once that completes and we're awaiting that because it has to finish first so once that completes we're using a raw transaction Creator called there's a couple of different calls some of the helper calls like upload file are are quicker and easier to use but I'm just using the the raw transaction call and the call is going to create a buffer to represent the file and it's going to put some tags in there currently the app is still in development so I'm just putting in some you know fake tags just to make sure that they get in there and then um this will only create a transaction object it doesn't complete the transaction so the next thing you have to do is sign off so you know it's confirming that you know the user actually wanted to do this and then you do that actual upload of the transaction and then you get the ID so after you've done all that um your transaction will succeed and you'll know that it succeeded because you will be able to get back all of the nft um peripheral data that that you needed yeah that is it so I hope this helped um if you have any questions leave a comment uh in the video and thanks