How To Create An NFT On NEAR

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:00

   hi everyone my name is dorian crutcher thank you for coming and watching to this uh simple nft minting tutorial um who am i i'm dorm crutcher from the near devrel team i'm also the host of our blockheads web series and also i love to play rugby and i used to play and i currently pick kickball in san francisco so i favorite sf say hi um so what we're doing today we're going to be doing a mini dive into the minting section of our nft zero to hero tutorial

2. 0:25

   made by our very own benji from the near devrel team and you can find it here at this link if you guys were interested in diving deep in for yourself it's really cool really well planned out really detailed um so definitely encourage you guys to check that out um we're also gonna be doing a small example of implementing near apijs to wire up a smart contract to a front-end javascript application the tools you need for this tutorial will be yarn package manager

3. 0:48

   near api js near cli downloaded onto your terminal and the an account on the near testnet wallet so go to wild.testnet.org to make your testnet wallet account to interact with the blockchain and your application an id such as vs code so that's we're going to be using in this tutorial so get that all downloaded for yourselves so to start this off we have two reports you're gonna be using uh the nft

4. 1:14

   tutorial repo which is where the contract code exists and the uh nft simple front-end i created which just includes a button that allows to mint our nft onto our account and have our nft appear in our wallet so i'm going to exit this and clone these two repos right now so under my little face get clone get cloned there we go okay so now we're cloning the repos okay awesome so we're going to go ahead and enter our

5. 2:04

   nft tutorial folder and after we do that we're actually going to check out this branch called 2.minting so if we go back to this link here you'll see that this nft tutorial is rather in-depth and it's broken up into multiple sections uh but each sections have their own branch in our edits repo that leads to a partially complete smart contract this 2. minting is going to be all the code we need to mint nft onto the near blockchain and have it appear

6. 2:37

   in our wallet uh you can go into tutorial to see the full in-depth tutorial to see like how you build out this nft smart contract for yourself but for now again we're just going to use a partial contract enough for the tools to be there for us to invent this nft so let's go ahead and check out this two dot minting branch so git checkout two dot minting hit plus there okay so if you can see under my little face here and make my face a little smaller

7. 3:10

   um you can see two dimensioning here knowing that we're in that branch um and yeah let's continue forward so first things first what does it mean to mint and ft like what does it mean in terms of a smart contract to make an nft a contract needs to be able to keep track of tokens store information for each token i.e the metadata for each token link a token to an owner um that's the final step

8. 3:34

   um so let's take a look at the contract struct so we can go to lib.rs inside of our nft folder site entity contract inside of source we find lib.rs and this is where this contract struct actually exists right around here so this is we're going to define so in this contract struct we have different fields and each of these fields contain what's called the collection a collection is just a data structure that near um has to simulate

9. 4:08

   things like maps on ordered maps or vectors so here we have to look at maps which just accept a key value pair from any data you want to store onto the near blockchain so this first one here is just an owner id which accepts an account id an account id is just the type it's just the custom type that near um has created and stored in their sdk it all it is is a string that ensures that there are no special or unsupported characters used in that entry we have tokens per owner which allows

10. 4:39

    you to keep track of the tokens owned by any account tokens by id which returns all the information of a specific token and tokens metadata by id which returns the metadata for a specific token so just the metadata for that specific token we also have this other type here called tokenid which is just a string so like if i were to put string there that would also work um again we're going to reference this uh this struct later on in the tutorial so i just wanted to point that out early on

11. 5:03

    and note so you guys know what's here and knows and you guys also know where the token information gets stored so next up are our initialization functions so what is an initialization function so all it is is a function that can only be called one time if you try to call this function again after you call it once it'll just throw an error saying that the contract is already initialized

12. 5:25

    so typically what's done is after the contract gets deployed onto an account so every contract code gets deployed onto a new account you'll call this function to initialize the contract or to initialize some data that you may want to like enter into your contract before i'm actually using it um so here we have two initialization functions uh marked by these initialization flags i think macros

13. 5:49

    so the first one is the new method which initializes all the contract fields find above so all these fields that we defined here gets initialized in this new method here after that we have our new default metadata our new default meta method which initializes the contract metadata so that's all this information right here so now what is exactly this information so if we head over to our metadata rs section you can see we have this field called nft contract metadata we have three

14. 6:22

    required fields which is the only ones i'm going to be explaining for now you can look into these other ones on your own this contract is available for download the comments are very detailed in this in each of these contracts um but so the spec is just a version of the smart contract so we can update this as we modify and upgrade the smart contract upgrading smart contracts is also included in the nft 0 tutorial by the way um we have the actual name of the smart contract we have a symbol for

15. 6:44

    the shorthand of the name of the smart contract so in this case the name of the smart contract is nft tutorial contract and the symbol is just go team it could be any shorthand version of the name that you create or just a nickname it's called go team because we're going to be minting a go team token today that's the nft we're going to actually be minting and seeing in our near wall later on tutorial so next up is we have our token metadata

16. 7:09

    so back to metadata rs let's get rid of that i'll get rid of this there we go it's a little bigger so now this has a bunch of different fields you can populate but the only ones we're going to be paying attention to for now and for the sake of this tutorial will be the tile description media so the title will be the actual literal name of the nft and the description be a description of the nft and the media will be the information that the nft actually

17. 7:33

    contains and references for example it could be an image it could be a storage link it could be whatever you want for this tutorial i'm using a gif so in other words an image file if you go to okay so if you go to nomicon.io this is a very useful website because this is essentially what this is essentially where all the information about near's token standards libs so you can see information about our about our non-fungible token standards you can see information about our fungible token standards

18. 8:04

    you go here and you follow what's in this in this guide essentially and that's going to adhere your contract to our token standards again you can adhere to our contract um our contract standards uh using the zero to hero tutorial that i'm going to keep plugging throughout this throughout this entire video um but yeah you follow that tutorial you're going to be following our standards essentially yeah so again nomicon io to get to get detailed information on the

19. 8:28

    near nft and functional token standards so continuing on now we're going to actually look at the literal minting function itself uh and then we're going to get our hands dirty students to actually see these um to see these like functions in action so hold type so in mint.rs so now we're in mint.rs we can see our nft minting function our nft mitten function will interact with these three fields that were defined earlier in our structs so again remember we point out that struct uh we're referencing that a lot because

20. 9:09

    that's going to be where nft information is stored and tracked so we have tokens per owner tokens by id and tokens metadata by id so how does admitting function actually interact with these different fields well for the tokens per owner field it adds the token id to a set of tokens that the receiver then owns for the tokens by id field it creates a token object and maps the token id to that token object in the tokens by id

21. 9:34

    field the token metadata id maps the token id to its metadata okay the arguments listed here will be the token id which is a custom id given to a token that's just simply a string so again we defined a little bit earlier the metadata itself which is just an object some metadata associated with the token and then the receiver id which is the which is the account that will own the nft so again this is using this custom type which is a string that omits special

22. 10:05

    characters in other words it'll just be everything that follows in your account essentially in your account name essentially for the actual minting function itself i'm going to like minimize this a bit as you can see his blood better um we have so this first line here takes into account or stores the initial storage that the nft contract is currently using and i'm going to get into more detail why we have to actually care about storage in a minute that's fairly important but we're going to get into in just a

23. 10:37

    second so this next field is we're going to attract the owner of an id all right an owner of an nft so we're storing the receiver id which is just a string into this token object here after that we have this assertion field this just checks if the nft that we're missing right now currently exists if it does it will throw and throw this error saying this token or exists and prevent the minting of that token

24. 11:03

    after that uh we have one of our struct property we have our one of our struct fields where we actually insert the metadata for the token so we can see the metadata here is being stored to the key which is the token id here after that we have this internal function so we have this whole slew of internal functions here it's actually not not too bad but we're not going to go into details of what each of these are it's a little past where we have allotted for time

25. 11:27

    but if you go again to our nft zero to hero tutorial it'll cover all the internal functions for you and you can get a better idea of what each of these do and you know how it all works um so again go check out the nft zero tier tutorial at near.org for more information but for now um the high level idea is that this just adds the token to the owner so here's the actual literal token id to the owner id that's all you should really need to know for now

26. 11:52

    and then now this is now so again we're back to storage so again why do we even care about storage um it's because every contract that is created on near is deployed onto a new account um and every bit of information that gets stored onto that state of that contract has to be paid for in some way it's being paid for by that new account so more nft's minted means the more storage

27. 12:16

    to use on behalf of that account means that more tokens have to be paid out in order to cover storage this is called storage staking you can find more information on that in the near docks under storage taking or in their storage um so the more storage you use the more uh the new account has to put up in tokens to pay and cover that storage so what we're doing um instead is we're uh charging the user

28. 12:39

    for that storage or we're having the user pay for that like increased storage or for that minted token um and this is done to prevent the uh one to prevent like someone like spamming the mint the mint function onto an account and like draining their entire account of like all their funds because that would be you know that would not be good so in this case the user itself has to pay for each for every like nft they're storing and any excess funds that they pay for gets

29. 13:03

    refunded using this function here it's one of our other internal functions okay so now let's jump into deploying our smart contract onto a new account so first thing we do is run yarn on yard build yarn is going to install dependencies that come with the near tutorial repo so we're going to run yarn and yarn build will run a script to compile our smart contract that some compound smart contract will go will be turned into a dot wasn't file which um according to his build.sh script will

30. 13:37

    appear in a file called out we actually did compile it earlier but we're going to compile again just for you know tutorial purposes so yarn build you can ignore all these errors you can ignore all these warnings when you see them again this is a partial contract so the full contract through zero to here tutorial will finish and results in none of these actually appearing we're using a partial contract so that's where you're seeing all these mornings so don't worry about that so over here you can see our main.wasm

31. 14:02

    file uh so let's just keep moving forward so now we're gonna actually have to create our new account so let's head on over to wallet.test.near.org and let's make a new account so we're going to create an account just call it um call it anything you want to call it uh whatever name you want to give it let's just call this um eth denver nft near testnet i think that's fine i'm going to copy this so i don't have to retype this later on and reserve that count id

32. 14:34

    it's going to make a passphrase for me so i'm going to hit continue and i'm going to copy this there we go oops well okay that's fine um and hit continue again and hit get word number four where number four is rescue different type and rescue here rescue let's give it one minute just you waiting take a minute on your end so just be patient

33. 15:37

    okay so there we go we have our um we have our new account name we have a new wallet name so we're gonna again just copy this over so we don't have to retype this uh and log in using your cli so now um when we use when we run near login that stores a full access key pair onto your local machine for near cli to use so we're going to run near login we're going to give this account we're going to give full access to near cli via this account so that's what's requesting here so we're going to paste their name type in

34. 16:10

    testnet hit confirm so once that complete you will see this window and you can just close this window you should see a little message prompt here saying logged in successfully so you know it worked um moving on with our demo we're actually gonna store uh that account name we just created into uh this variable here for our cli so we're gonna say export i'm gonna make this a little bigger

35. 16:49

    and move this window to the side get rid of that export nft contract id remember to add the testnet and we're going to echo this to make sure this works so echo dollar sign nft contract id and we should see under my little face here the name of our account so that's awesome so we know that works so now um we're gonna locate the look we're gonna find the location of our dot wasn't file again that's uh this is uh that's just the main.wasm file and we're going to then use that to deploy it um we're gonna use that to deploy this

36. 17:31

    position file to our account so we're gonna say near deploy uh dash dash wasm file file out slash main account id uh dollar sign nft contract id so before i hit enter let's just kind of you know break this down and see what i just did so near deploy near comes from the near cli deploy is the function used to actually deploy wasps files onto an account this dos jess wasm file option uh

37. 18:10

    specifies the wasp file to be deployed onto an account so this is the actual wizard file itself dash account id is the name of the account on near that the wasm file will be deployed onto so we're going to hit enter starting deployment see your name here east denver nft near.testnet and it says done deploying so there you go we have our um we have our wasn't file deployed onto an account so remember next thing we do right after we deploy our smart contract onto an

38. 18:41

    account it's initialize the contract using the initialization functions so here we have um i'm going to make this a little bigger so you guys can pause the you know screen and see we have near call nft contract id uh new development data that's the initialization function that they described earlier owner id the owner of the contract which is just going to be the name of the contract account itself so this owner id is the name of the contract account itself that are passing into this method

39. 19:07

    and then anytime we call contract we have to uh specify the account that is making this call so this could this technically doesn't have to be nft contract id but um you know if for now for this example it's just gonna we're just gonna use a contract account to make a call to itself to initialize this function so we're calling the function itself from its own contract so we're going to copy literally all of this oops

40. 19:34

    and just paste into our terminal so you have to wait for this to succeed timeout errors let's try this one more time okay so it seems like the contract has been initialized i'm just gonna double check on the wallet itself okay so you can see that the initialization function succeeded and we can test this out using a view call just which is uh we're gonna do next to see if the token metadata has properly stored remember that initialization function that we just called earlier what that does is store the

41. 20:40

    contract metadata onto the contract itself into that state so lib.rs move my face back over here and we can see all we're doing is storing this information onto the blockchain so if i run uh near view so difference between call and view depends on whether whether or not the function is a change method or view method change methods change the state of the blockchain or change the state of the blockchain i mean change the state of your account and vmethod just post information from that state so if you ever need to view

42. 21:13

    any information from that state we just call v method and it doesn't cost anything so we're going to paste this here so there we go we can actually see the nft contract metadata so we know that the initialization function worked that's a good thing so let me just make this a little bigger again sorry just kind of keep going back and forth between these two um so now this will be the literal nft that we're going to mint uh through near

43. 21:40

    cli after that we're going to run our front end and like show you how to wire up front as you can mix it from there too but after we run this we should actually see the nft appear in our wallet so it's going to be really exciting really cool so we're going to so the function will end up looking like this it looks kind of crazy here this nft mint all this token object stuff i'm going to essentially describe what this argument looks like in a cleaner format so we have let's make this a little bigger for you

44. 22:06

    we have the token id we can name the same thing for now we're going to name it token dash one for purposes of this tutorial the metadata for the token which again which we're going to be using the title description and media section and then the receiver id meaning the owner of this token which is which will just be the nft contract id again right the contract we just created but again this could be any near account so you can maybe gift someone at nft if you want to

45. 22:30

    uh via testnet so we have title which would be my non-fungible token description the team most certainly goes again this will be a go team token then the media so this link actually links to a gif which will be the nft itself and you'll see what i mean in just a second so i'm going to escape this actually i'm going to talk about this so this is what it will literally look like in your terminal when you call it so you

46. 22:55

    can pause the screen uh take a read over this in a minute uh the only thing i want to point out here is um this dash that's amount 0.1 near so this is how i attach near onto a call through the cli remember this near is being used to pay for storage um after missing this nft so the cost of storage is going to be covered by the user again this user is just a contract id but this can be anybody calling this this account method and they that user will have to pay for storage to mint in nft so that's the

47. 23:24

    only kind of part i want to like describe here but everything else i kind of described earlier um so i put that function down here i'm just going to paste this there so making a new uh call if i go to my near wallet now i shouldn't see anything in here so this this is an empty collections tab uh if you see this empty string here this is how you know this function call actually succeeded it

48. 23:50

    will let you know if a function calls failed so this this empty string is a good thing but we can actually add some comments if you want to see some actual output but um so if i refresh the page go back to the collections tab or collectibles tab we should see the go team token so this is our nft like this is the actual literal like nft we just minted so this is how you actually mint an ft with

49. 24:14

    our contract using near cli so good job guys if you made this far you've just minted your first nft um but now let's just see how we actually wire this all into a front end so if i if i were to go back to um let's see first one go back to my slides make sure you didn't miss anything uh we can yeah we can even like view information about our nft but uh you could just simply uh type in this

50. 24:38

    command and you can get like the interface information we just stored onto the blockchain about your nft so if you want to do that you can go ahead okay you guys made this foreign tutorial i want to say good job you guys have made to your very first entity using the near cli next up is how you actually use near your page yes to wire up the contract to your front-end application and we're going to be minting another go team token to this account um again

51. 25:01

    it'll be wiring up a contract or showing you guys how to wire up your pages so you can use a front-end application with um the near blockchain so it'd be really cool so bear with me guys don't be too much longer we're almost done so very first thing we do is going to get out of this repo here it's nfc tutorial repo go into the nft tutorial front-end repo and switch and check out this branch

52. 25:26

    called ethe denver dash tutorial so get check out uh eath denver tutorial after that we're gonna run yarn to install the dependencies for this application and then yarn start to launch the application so you guys can see what we're working with it's a very very simple application it's literally just a button that just mints another go team token so you should see two of these tokens appear here uh once

53. 26:03

    you're done with this uh this tutorial so i'm gonna first log in when we log in we're going to create a new function uh function call access key for this application uh on here there's functional access keys for access keys won't go into details of what those are about um but there we'll have like a maybe like a link in description for you guys can check out um so you can learn more about the difference between these two type of keys or key pairs i should say

54. 26:27

    so if i hit mint nft that should create a little little note here saying add a contract function call here um because we have to actually add the logic in so you can you know show you guys like what that process looks like it's it's pretty straightforward before we do that i'm going to actually run through um this entire like architecture uh won't be too long uh to show you guys like what this is all about um we're gonna show you guys like you know what this what the actual process of

55. 26:52

    connecting your application to than your blockchain looks like uh before i do i want to make sure i mentioned this resource it's very valuable it makes this entire process a lot easier for any application you're setting up you want to go to the near api js quick reference guide you can find on our docs page by clicking this link um i literally always go back to this page every time i make a new application because it's always just really handy

56. 27:16

    it's really clean it's really easy to like look through you can see here how it's like installed in your ipad yes to import your account to um setting up your application on a frontend application or a node.js script if we want to do some back-end work with connecting to the near blockchain so you can see how you can you know start get your key stores using a browser using your using a local directory

57. 27:40

    it's very very handy you can sign into your application load an account launch a contract deploy an account in fact near cli is a wrapper around near iph so uh this is also kind of like a way that near cli works but near cli has its own page but anyway so just want to point out this reference for you make sure you check it out whenever using your pages if you want something quick and easy to reference um so going on with the tutorial

58. 28:04

    we're going to start for the configuration page so let's see we're going to minimize all of this i'm going to move my little face back down to here and go into our config.js file so this is a template structure that i use to start um our application uh typically you can go to like near uh dot dev you will use one of the example locations that most that best fit your needs that's your starting point for um your application that's what i would

59. 28:28

    suggest and if you have any questions on how to get a get a good quick start onto your application you can always message me on our discord channel i'm just like durian pipe near um uh but anyway so in this configuration file we're just gonna look at one chunk of these things so uh this file is just made so you can easily switch between these different types of um config so one for testnet one for mainnet one for beta net local whatever you want

60. 28:52

    but typically we're gonna be using testnet so it's just set to development um if we're while we're actually creating our application so in this uh file we find this object it returns uh this field called um it has like various fields called network id node url contract name while url help url exploreurl this denotes the exact network you want to connect to which is test net this is this links you to the actual like node

61. 29:16

    you you'll be working with so rpc.test.org is node that we typically use during development the contract name being the contract account that's going to be uh the project will be deployed onto that's defined in a that's actually defined in our um actually up here uh yes i'm using a different uh account for this file we don't have to use them to create earlier i'm just using one that this application was made for um

62. 29:39

    and we have wallet url to connect to the wallet and the helper url uh to actually fund dev accounts um as like uh we create this application so you can actually create dev accounts which are just like randomly generate accounts by the near ecosystem funded with their own test tokens and this is what is actually used to fund these tests these test accounts with test tokens and then the explore url explore urls

63. 30:02

    just how you explore like uh or find information about transactions information about accounts you can find all this really cool information using our very own explorer on year so yeah that's essentially what's happening for these other sections too so just you know looking at one little chunk of that to understand it next up is the i believe utils folder yeah so util.js um so essentially uh what's happening here is we are retrieving the config outputs or retrieving one of those objects that we just went over we're using that to

64. 30:34

    connect to the near blockchain uh we have a bunch of like uh like window properties like listed here defined here just to expose these tools to a global setting uh you may not want to do this way but for this application that's just how this particular application is set up just so i can access these a little bit easier we can always like reference these tools by importing new apigee as in just like your another javascript file

65. 30:58

    and then finally it creates a new contract object so this is the actual object that lets us interact with our smart contract and the functions that uh we are going to use or exposed to um the account that's logged in will be the nft mint function and this function i created called check token to check the existence of a token in one of those collections i defined earlier so uh but the main one that we're gonna be focusing on is this uh change method

66. 31:22

    called nft mint so again difference between change method and view method is that change methods modify the state of the blockchain meaning that anytime we store information or change information on the blockchain we're changing the state which occurs a fee so that's what change with the does just changes or adds information onto the blockchain that's why we're putting the nft min function there because we're adding information to the blockchain as we meant a new token the view method is check is a something

67. 31:46

    retrieving from blockchain in this case we're retrieving a boolean uh from the blockchain so we're just pulling information from the blockchain so it's a it's a free method um we're just retrieving this information using a view method that's what's called the view method um yeah so again these templates are laid out in uh neurodev examples for you so you don't have to memorize everything and you can always go to the quick reference guide too just to see how this all works again too

68. 32:11

    um so yeah now we have to actually just add our mixing logic so if we go to mintingtool.js we can see let's see yeah you can see that little console log that i put there saying you have to add the contract function call here so i'm going to cheat a little bit you can pause the screen there to see what i just added but let's see control c paste over this console log and pull this back up for you if you want to see it

69. 32:44

    there we go so yeah it's very similar to what we added in the um in the actual like cli tool um when we made that function call from the near cli so we have our token id here it's it's a unique name that we're giving the token id so usually these tokens ids will be unique um essentially that uh kind of like check method i showed you earlier in the view method sorry that view method i showed you guys earlier uh checks for this token id to see if this token already exists um i'm

70. 33:10

    just kind of customizing it based off of the name of the account uh so it would be like you know blockhead.testnet dash go team token or the uh or you know dooring.testnet dash go team token so it's easily unique based off whoever's logged in that's just the way i kind of set up for this example the metadata consists of the title description and media same thing as before and then the receiver id will be set to the

71. 33:34

    person that's currently logged in if i go to utils.js you can see windows uh yeah window.account id will just return the literal string of the person that's currently logged into your application so if we go back here go back to our application go back to the mintingtool.js hit save because then save this also just one more thing all function calls make your contractor asynchronous so be sure to include this async function or async

72. 34:07

    you know call to your to your method here and add in a weight here to wait for the response of your uh of your um function call so again all methods or all calls you make to a blockchain are always asynchronous so keep that in mind um so now we've add that i can just hit this mint button again and what we should see uh you know just reminder you have one nft here if this works we should see two nf go team

73. 34:34

    tokens here because i'm mixing the same token uh just under a different token id and under a different contract account id so it's requesting one year for storage i should also go into that a little bit so this additional method here is initial line here is an optional line you can add for gas so i'm manually adding um like uh some amount of near uh to pay for to pay for the gas that may occur while using

74. 34:57

    uh making this transaction this second line here this uh second argument afterwards or i guess third argument i should say um is the is a deposit that i'm making so that's just literally sending near to uh this contract account so i'm using this to pay for storage uh of this newly minted nft so that's all it's doing so the reason why there's so many zeros here is because this is uh this is um the value set in the octave

75. 35:21

    year which is 1 times 10 to the 24th and then but this like you know 1 times 10 to 24 is equal to one single near token so again this is just simply called yakdo near so 1 times 10 to the 24th and hit approve once that completes it should redirect us to the application okay so i'm using that check method to check for the existence of nft according to whoever's logged in if whoever logged in as argument ft this little message will appear and i include

76. 36:03

    this handy link to your near wallet so we can go to our collectibles tab and there we go you have two two newly minted uh go team tokens go team nfts uh to our near wallet and that's it guys that is our entire tutorial uh again i encourage you guys to go check out the nft zero2hero tutorial found in our near.org documentations page to get a full in-depth look at how to become a zero to you know have become a hero on making your very own nft smart contract thank you so much guys for watching and i hope

77. 36:36

    you had fun message me on discord if you guys have any questions and yeah have a good day