Create your own NFT minter @ Mintbase

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

1. 0:00

   hi everyone my name is lish and today we're working with mint bay starter project to help you create your own minter okay so as a starting point you need to go to mint base on github and find create mint base app which is the starting point to your application and here you'll find many different things already set up for you so you don't have to worry about uh set up your wallet set up ashura that i'll i'll get back to that

2. 0:32

   later on um so yeah this is a pretty good starting point let's fork this okay fork is under work just wait a second and all right so we have um already have the repo for it we'll copy this and uh we'll just pull it sorry okay so we're cloning and here you go so this is your starting point and here you might want let me check the new version so all right i will need to go into folder and let's just install the application

3. 1:37

   a couple warnings here no worries about this okay it's done we're ready to rock on today's goal is to create your own mentor and in order to do that you need to have a smart contract um an nft smart contract that will be used to mint your tokens and for that you need to go to test net domain based o that i already have here and this is just play money and you don't have to worry about spending any money it's all a test and what we're going to do is we're

4. 2:18

   going to deploy a new store uh or a new smart contract that you'll be using with your application to mint your tokens so for our store name uh we can just place mata biddle uh work workshop maybe oh okay so maybe yeah not a little workshop and for our symbol let's just do this okay you can even do another little lowercase and yeah with for this you need to go to testnet.netbase.io deploy and now we're deploying the store

5. 3:13

   okay this is interesting and uh i need to explain the seven year um are not only for the transaction fee uh some of it will be will go to the transaction fee but other will be used to add batting for the storage on your contract so every single time you add data to your contract uh it needs to base some uh you need to stake some some near for the storage and this is what this is for and you'll

6. 3:38

   see in the transaction in a bit so we're transacting transferring okay the transaction was successful we chose metabull workshops the store then i'm going to copy this transaction and i'll be showing you the explorer so you understand what i'm talking about if you paste here the transaction hash you'll see that this was the transaction in which i deployed a store i created a store at main base here's the information

7. 4:17

   and you'll see that some of it was for the transaction and and some was just a deposit so if we go to uh the address which is also on your url metavilleworkshop.minspace2 which is mint based factory if you copy this and you paste it here you'll see that there's some still some balance here and it used uh 000 bytes which um yeah i think 100 kilobytes is equivalent to one year in storage so yeah you can make the the calculations

8. 5:07

   okay now we have a store uh this is good it's empty and we'll try to create an application that makes tokens that will pop up here on this store okay now we're back to our project and uh in order to create a minter and since this is an xjs project you might need to to learn more a bit about it's pretty simple but uh yeah if you need some more instructions you might need to search next.js which is a pretty good framework

9. 5:38

   for react applications um but in order to create a new page on your project you might need to go into the pages folder and uh let's call it s minter.tsx and uh for this uh page we want to make wanna make it real simple so uh let's create just let's start it like this maybe i'll just make it a bit bigger here and uh we want to place something in here so let's return just a a d for now and we'll make it better and we will export uh default mentor

10. 6:26

    notice that i'm also using um utep co-pilot uh what works pretty well with react components so this is our application so far super simple and we will try and run it yarndav okay cool since this is a um since this is already a starter application it already has some things um but we'll go into slash minter so um okay interesting there's something in here it was compiled should be this i'll just put something here so we can

11. 7:12

    try and see if it's okay so you can see that our application is already running rendering this page and uh yes we we want to to make a component here and we'll go back to that soon but before we go any further i also recommend you to create your data file in which you place two different two two variables here and the first one is i'll start writing it down next public i don't have a next public

12. 8:02

    mint base js api key and the other one is next base.js network and these are pretty important for free um because it's essentially yeah how you instruct your application on the build time so in production you might want to add mainnet here but since we're just um since we're just creating a test net application and and testing and yeah we're developing we're developing so i think testnet might be the one you want to place here and for this one

13. 8:44

    uh you can go back to mint base and hit this button here it says resources then you go down to developers no sorry you go to your profile after you log in with your with your account here and you go to developer and here you can copy your api key so this is the one that you'll be using for your own applications and we will paste it here hit it let's run again the project and yeah so we'll start creating our

14. 9:22

    inventor other cool thing that you might want to to look up for is this page developers that has some information about like all the tools and everything we have at mid base for you to play around with uh we have our our graph endpoint here and some other stuff you can also find documentation so if you have any questions uh you can always reach out to us but um yeah if you want to explore on your

15. 9:56

    own then um definitely go in here and and explore uh what we have on the documentation okay back to building so i think we want to create a new component let's call it form and place everything in there and our new component will have a few things so we're using react hoop form which is a library you could use whatever you want but in order to make it this very simple and since it's already in the starter project

16. 10:29

    i think you want to to use reactive form so reactive form is a yeah as it says like it's a react uh library for forms so um we will create our form for now it doesn't take any props and we will just create a form and then in here um we might want to you know read the wallet state from from the context from our store and uh we can do like this use wallet from and i think we need to go back to where is it i think it's in services

17. 11:18

    and fighters and baseball context and then if you want to get some wallet information and this might be useful for understanding if your user is connected or is it not so we have wallet we have is connected is connected and we also have the details from the connected wallet so and now uh we will just again make a simple div here yeah simple div for now let's just maybe console.log is connected

18. 12:04

    and uh open our console and we see that our user is not connected so our user is not connected that's cool we have some information we can inspect wallet we can inspect details but we'll do that further on so another cool component we have in this project is the nav bar and the nav bar wait it's not enough bar it's the heather yeah the heather already has um as you see it's already using the wallet hook

19. 12:38

    and has a button that allows users to connect and disconnect so you could you could get the idea by just written code and i will just import this to our app or to our page so we'll do it like this and here we will create a new div that will have um we can just do this and uh have a header maybe the header goes first and uh this should show a little heather here and the connect button and

20. 13:21

    this i think the first um first thing you might want to add to your application you don't need to build it yourself you can just read how we're doing here or even like use this uh and customize the way you want this header because the button is already configured here so it's very nice um starting point for for you to start like building um the minter and not focusing on creating a wallet connection but we will uh connect our wallet so you can so you see this this working

21. 13:54

    we'll connect with visa my desknet wallet and nice i'm connected as you can see reset disconnect button and um yeah let's go back on to building for this component we're using a for example for this project we're using uh tillwind um you might want to investigate a bit um tillwent but it's very nice css framework um and yeah you can check it out you can check out the documentation there's a lot of very detailed uh documents here and how to use

22. 14:46

    tailwind how to configure tailwind uh all the the classes and um yeah it's pretty neat um but we're focusing on just using it so with full this means with a hundred percent um yeah i'm not going into the details of tillwin but you can get the idea so now uh we want to create so for our mentor i think we want to add a let's say a title description and we also want to to add a image like a file input so people can can add their images so i think this is

23. 15:27

    like the the simple nft so we will create a very simple mentor with title description and image input okay so here we'll do form and uh yeah for last name let's let's think so this is background white it will have uh rounded edges anything for now this is good i don't even need the background right but we'll keep it like this and for our form uh we will have three three containers or three divs that will contain our input fields and some other information about

24. 16:16

    the input so we'll create three dates here and for the first div we will we'll do i'm not sure what classes we want for now but let's think uh maybe um okay maybe okay maybe like this and just do label i think that's how the other ninja was made so for this label we want last name and uh make a block that's okay so it's our label this is the title and here we want title and then yeah nice so input github

25. 17:24

    compiler just knows exactly what i want well look at this i don't even know if i want all this uh but actually i think this is this is not wrong so we'll keep it thank you for pilot uh co-pilot is is very nice to me and we'll check out how is it looking now okay not bad this is our title this is our input maybe some some margin right here uh maybe we want to add something in here that should well maybe on the forum we want some padding on form i think that's that's

26. 18:02

    what we want so we want some padding in the x ace x's and uh what we're going to do like four maybe i don't know let's try it out before it doesn't look bad and uh maybe we want to maybe we want to yeah we'll just keep it like this for now so we're basically just creating our ui we can take out this for now i think and adding three more that will show up as titles okay not bad maybe we want

27. 18:43

    some margin in here so we will be copying this and just make it margin bottom maybe two or two maybe four looks super maybe four okay okay not bad so we have title we have title and we have title so now we're going to change this from title to description and um let's make this description and and i think this is this is good we actually won't need this one

28. 19:44

    two text inputs so um now we want to use somehow the form the used form the form hook and uh wow this topical pilot is doing pretty well i don't even need to code anymore so um okay so now for each of these input fields like these two description and um in title we want to register this on on our our field or sorry on our on our form and what we'll do is we'll use this and for our title we will be

29. 20:50

    stating that this is required and we're registering this input as with the id title and we're registering um the description as description and it's also required for our entity so basically what we're creating you can still see it but yeah it's um okay and our form also needs a submit button or submit input and this is how you do it very simple let's just create mint okay and uh we might want to add some

30. 21:42

    classes here okay and for our classes let's just make it black and also rounded okay and uh we'll make it like with full and um maybe text white so the decks cool and now let's add some padding too so and this is our button for minting we'll also want to add cursor pointer all right so it's starting to look something like a nfc meter nice okay so now we'll want to add

31. 22:49

    another thing for our cover image and this one will be slightly a bit more difficult than the others but okay so for this we'll also add our label like the same way we're doing with every single one so very image okay and now we need some input right so instead of text should be file placeholder no placeholder okay looks uh interesting i think this is the one and now uh the way we're gonna do this is register

32. 23:44

    this one require it and uh we'll register it as a cover image maybe and i think this is our form against so let's try and oh it should not work like this okay yeah because gotcha okay so now our form is done and uh we will need something to handle our submission so oh github co-pilot it's crazy so for our submission uh what we're doing is good data annie maybe and um what we're doing is okay so on

33. 24:32

    submit we're doing uh we're using handle submit from react to form that will take our handler you can call it unsubmit and then we will just log the data okay this is not bad let me try add something here okay yeah let's log our data object so we'll add something oops we'll add something here and we will maybe uh so my images okay

34. 25:34

    i'm sure nice so you see our description our title and you see our file so file we just added to this input okay this is cool um now in order to create our our nft we need to do a couple of things so the first one uh we might want to do is um we might want to upload a file right and in order to do this mint base already has this uh pretty cool service that allows you to upload data uh on rv being the metadata file or even like your your images your videos your music your 3d models

35. 26:21

    whatever you really want to upload it's possible to do it with minbus js that by the way is already configured and uh on on this on the starter project but i would suggest you to to just go on on on github and uh try and search mint based js oops js and on impgs you'll be able to find the documentation it's um auto generated from the types but it's already pretty good for you for you to investigate whatever we're doing here and also the code is open source so yeah just jump in it and and see if yeah

36. 27:03

    if you need something else from the library that we're not explaining here in this video uh be sure to to check it out so for our mint tank uh what we're doing is and yeah so as i said like this js is already set up here and it's available through wallet right so if your user is is connected and we should be doing something like oh if if the user is connected uh or i mean if the user is not connected then just fail don't do anything else maybe throw an error uh do something here but if it is not if

37. 27:44

    it is connected i mean uh you can just simply uh use wallet dot mentor which is a class nice from um from npgs and i'm going to show you very quickly here on the mentor and uh let me i don't want to show you the code let me want to show you what is inventory yes so the menther exposes a couple of things um set field set metadata upload and upload field so these ones that set filled and set up an upload field mean that means

38. 28:21

    that you're constru you're constructing this metadata object and if you're not aware what this means you can just go check some some random nft on my base and you'll be able to see what i mean so this is the metadata file every single nft has this one and it basically uh points you to where is matt the media file so where is the image of this uh of this nft and you can see it's here the image but this metadata file just serves the

39. 28:53

    purpose of directing or pointing to resources external to the to the blockchain right so um yeah so what i mean is on the minter uh on input.js when you upload a field you basically just give you gives you basically basically just give this up this file it uploads generates this hash that points to the file on some decentralized file storage and then places this into your metadata object that then needs to be uh uploaded

40. 29:24

    uh to create the nft but yeah we'll get back to that i think explaining which code is much easier so wallet.minter.upload filled which means which is which is exactly what i just would just meant by my explanation and we will want to import some types the metadata field oh well out of completion is amazing and yeah you can see on upload fields um if you hover it you see filled metadata

41. 29:59

    filled this means that you want to upload media which is the cover image and you have all the possible things you can even add more uh or even use extra but these are the ones we support on mint based ui so if if you're willing to mint an nfc that you want to show on your base store or like adhere to the standard um yeah you should be following we should be using these types so media and then uh some some image here we don't know where the image is yet so um

42. 30:29

    we will need to to do some more some more work here but i think um okay so this should be the cover image and we'll get back to this okay const cover image this doesn't really work but okay we'll get back to that and the upload field returns a boolean actually interesting oh yeah so yeah um returns response data which is um compose the data and uh error here yep uh and uh upload

43. 31:26

    data is a boolean and this is uh okay we might want to turn this into a synchronous function this should be okay we'll get back to this um

44. 32:33

    okay i think we might upload want to rename this as a response in this as upload error okay um so we might want to if it doesn't have a wallet it should also not allow to to go any further okay this is not bad but we need to find a way to get the file and i think that is let me okay we'll do this like this and console.log let's just log our data object and i think we can even

45. 33:36

    date a dot cover image and i think that's um okay so this is our cover image we want to get all right so our cover image is data and this should be enough to upload the file i'm not sure what this is airing here okay they're unused okay that's cool um all right so we just created the upload field call and now what we want to do is okay if there's an error maybe you want to throw an error or maybe you want to

46. 34:29

    log maybe you want to do this and just give us whatever error you got show the user throw in the console but you also want to set the rest of the metadata like title and description to the metadata object and in order to do that you need to do wallet.minter.set metadata oops set metadata and this takes an object so it will it won't overwrite what you already have on on metadata which is the cover image hash and uh

47. 35:06

    and the hash in the url but we'll add this um also to the metadata object unless you use this one extra argument that that overrides everything and just sets whatever you want here uh that we don't want so we just want to add title here maybe we just take it from data directly and description as well cool um we might not have wallet so let's do it like this and we also might not have to enter

48. 35:38

    okay and then um we have the metadata we have everything already set up so before we call the contract we will do a log here and show whatever is on the metadata and let's say are we able to read current mint yeah should be the current maybe this means every name permit doesn't really give us much but it does actually so we're creating a mint uh let's see and this should be the object we're just creating all right so let's mint i believe this is sending

49. 36:18

    something yeah right it's using our it's using mint based service to upload on our weave as you can see we'll take a bit but once it's done it should show our all right so as you can see this is the object we just created create a title description media and um and the media hash so you can go directly to this url and you'll see that we've just uploaded this image yep pretty cool

50. 37:00

    okay so what's missing now we have metadata we have so we just need to mint the nft on the smart contract that will create it on the blockchain and i think we're done so let's go wallet.mint should be the method you you want to use and for this if you hover it you see that it takes the amount so the number of nfts you want to create this the same um like yeah the number of tokens you

51. 37:32

    want to create of this nft then the contract name should be the store name the one you've just created on minbasetastnet and then royalties and splits that are the financial rules embedded into your nfd so whenever you sell your nft marketplace royalties should go um should work forever so all the addresses that are set in royalties would always get some percentage of the sale and splits

52. 38:02

    are cleared after every single sale so let's say you list something in the market and uh you just split uh the the sale with someone else then on the first sale both of you will get whatever you you've just set it whatever you just said uh but then after the sale the new owner gets to choose whoever wants to split the sale if he if they want to sell it sometime in the future and then this category category is pretty cool because it's embedded in a blockchain it's stored on a contract sorry and then

53. 38:35

    it's pretty pretty useful if yeah you want to find some some tokens of the same kind if you're creating some let's say photography and you want to be included also on my base you can see uh that we include every single every single thing under these categories so you can see um for example photography that i just said yeah this just pulls all the photographies that were created with this category okay so we just want to

54. 39:06

    uh let's say for now we just made one we don't want to we don't want to confuse we don't want to add an extra field on our on our form we just really want to mint one token and that's what we're gonna do then uh we want to to select the store and for now we're just going to hard code this and uh we'll go we're going to take our address from where is it meta biddle workshop so this is the address you are

55. 39:41

    metabolworkshop.mainspace2.desnet sounds correct and then uh we want yeah we want nothing else maybe for now we'll just do undefined undefined and this yeah so this nft won't have any royalties in any and any splits and then we can just create a new category for for this called metabiddle and i think maybe we'll do this if and upload response upload response so if

56. 40:42

    if upload if if not upload responses doesn't it did that's a better little upload if did not upload or parrot then why is this still it's kind of weird it's error in here not okay but anyways so this should conclude our minter so let's take a look and see how it looks uh refresh the page okay so i'm connected as lewis f i will first nft for mata fiddle and i will call this is the description this

57. 41:33

    is a nice description and this should be just metabiddle number one and uh we need to select a new image so okay this is a little bit too bad and that's mint it so we're not showing any transition here we're not showing a spinner maybe you could add that to your to your application this is a very simple application but as you can see now we're signing a transaction and it's pretty useful to check out more information whenever

58. 42:06

    you're creating an nft um and take a look at this this is the reference so it might be might be important to for you to check out our weave before you hit submit so you can see that our nft has media which should point to our the right image all right this is it and also the media hash the title and the description so it looks like the mint is perfect where is it it's here and if i hit allow then i'm going to mint a token and it should show up on my

59. 42:40

    mint base store all right i just did it let me come here refresh oh i didn't need to refresh it was already there so as you can see my mint is here i was able to create a form and create mint token programmatically uh not programmatically but show you how to programmatically create a form that creates nfts that's the correct way to put it um so yeah you can check it out can open it

60. 43:10

    and uh we don't have any financial information here uh any royalties anything it's not listed in market but you can transfer it or you can even sell it so let's try and sell this and i can show you something nice you can you can create a rolling auction of this one nft and it takes a bit but once it's done should be in the marketplace so let's see the list in the marketplace and where is it

61. 43:42

    oh it's a ruling auction so yeah you need to click here and you see there's one one um just one and you could offer i cannot offer because i'm the owner but anyone else could come in and offer something for this for this entity hope you enjoyed this workshop um if you want to reach back out to me or anyone at mid base you can find us on telegram you can find us on twitter um if you

62. 44:08

    want to reach back out to me you can find me on twitter with the handle microchip gnu it's also the same one on telegram and discord so yeah if you if you have any questions if you have any ideas and if you want to build on top of this great infrastructure just reach back out to us see you