John Sterlacci I Tokenize Your App With Metal I ETHGlobal Taipei 2025

[Music] how's it going everyone John for metal. build and today we're going to create a tokenized app um so the first thing we're going to do is create a token with metal uh then we're going to bring it over to V Zer and Vibe code a basic app we have a starter template that you guys can pull down and and Fork out of uh into vzer and then you can either continue to use V zero or you can pull it down into an ID and and sort of flush the project out a little bit more um but by the end of this Workshop you should have a sample app and a fully tradable token on base so let's get started um first things first is you're going to want to go to metal. build create a metal account I already have one here um and so we're just going to hop into metal and first we're going to create a token um I'm going to call it uh Workshop work um and I'm going to set the the reward allocation on so this is basically the percentage of the token uh that is available to distribute as rewards through your app um which is kind of an important part of this flow so you're going to want to turn that on and then optionally um there's a merchant allocation so you can put your wallet here and it basically sets aside a portion of a token for um you know you have in your wallet you can do basically whatever you want with it um but I'm going to turn that off for now so going to come in here create this token and basically what's happening now is a token contract is getting deployed on basee um so was just created successfully and you'll notice the status here is not liquid and basically the token exists but it's not tradeable on Unis swop so there's no liquidity pool set up um we can do that manually through here but uh we're going to do that we're going to come back and do that so for right now we can just grab the token address here um and then we can hop over to v0 okay so we're in v0 we're in the sort of metal demo starter um when you Fork this into your v0 context you're going to have to add a few things into the project settings um so you'll come here and you'll basically add three environment variables uh one being the token address which we just copied so I'm going to come in here um delete that add a new one and the one thing about vzer it's a little finicky because the tokens are technically hex code so or bite code whatever um you might just have to add some uh quotations around it uh for it to accept the variable uh and then the other two things that you need are the metal API secret key so this is like the server side only um definitely be very careful with that one and then the metal public key and that's basically just uh for any of the getter transactions uh so you can put that in the front end is fine but uh where you get those is if we hop back to metal uh you can just come down here go to API keys and your public key is right here your secret key is right here uh and just copy those both out um so hopping back over this should be all set and now we're going to walk through the demo so this is very very basic functionality um so one of the things about v0 is it doesn't really have access at this moment to um sort of database or yeah a lot of the backend dependencies so for right now the the authentication in the database is a little scuffed but that's something that you can um sort of manually go into the code pull it down um and add sort of after the app I would highly recommend sort of mocking your app out in bzero because it's a extremely powerful front-end editor so let's kind of go through the sample demo uh I'll explain how this stuff works and then um we can kind of build out from there so get started and so the first thing that's going on here is that when I sign up with my email um basically what we're doing in the back end is calling the get or create holder endpoint uh and so that's setting up a server a privy server wallet for any of your users so right off the bat uh every single user regardless of what kind of authentication flow you use uh it's very easy to set up a wallet for them um so if we hop into the code here we can see that the create route um we are hitting this this holder endpoint um and so that's going to let us pass whatever kind of ID we want and it will either grab the wallet info or the holder info um if we have one that exists for that ID or it'll create a new one um and so the sort of setup right here is kind of the end metal function so we have kind of the concept of the holder um which is the wallet you can get pull information off the the holder API and then we have some basic actions which you can kind of stitch together into some pretty compelling flows um so the first token is is sort of our reward endpoint um that is right in here um and so this is uh token toen address distribute and if you remember when we created that token we set aside uh an allocation for rewards and those are the tokens that get distributed through this uh distribute endpoint and so um that allows you to set up rewards it allows you uh to give tokens to any of your holders or even random addresses um and so we hit the reward button there and then we should be able to do a quick refresh uh and we should have there we go one balance of the token um I'll do that again and then uh the spend end point is basically the reverse of the distribute endpoint and so that is taking uh token from a user and putting it back into um that distribu tion or rewards bucket so if I spend one uh pretty easy I had two it's going to refresh um these are all live based transactions by the way so they may take a little longer than you might expect um but that's just kind of the the transaction settling so spent to token perfect um cool so that's basic functionality we'll get into the the withdraw later um and so from there uh we can build out you know a compelling experience on top of this so what I'm going to basically prompt it to do is see create a slot machine component where I can spend a token in order to get a random token reward enough um cool so yeah this is just a very simple functionality that can be built on this um but there's a lot of other things that you can do uh you can reward people for you know taking actions within the app you can reward people for signing up you can reward people for bringing information into your app um it's it's these are very flexible Primitives and you you can kind of do whatever with them um I think slot machine just a pretty easy example so vzer is going to come in going to do its thing um and yeah let's just wait and see what happens okay I let it run for probably about 90 seconds um and as you can see we have uh the slot machine component so we have one token in our balance and yeah let's give it a spin so under the hood basically What's Happening Here is when I click the spin um it's using this spend end point to send off this token to the the reward account and then once it resolves the the win um then the token is basically coming back and and getting redistributed into my into my account so it's try it again okay I wasn't able to hit the jackpot but I manually gave myself a bunch of tokens um and then so what's next so your user interacted with your app they were able to collect a bunch of tokens for whatever um and now you know maybe they want to sell their tokens maybe they want to move them into their wallet um so yeah let's try to withdraw it um so at any point you can allow your user to withdraw the tokens uh but what I'm going to do first is come back here go to our token uh the workshop token and I'm actually going to create liquidity for this and so when I hit the create liquidity button what happens is on the back end we take um if you had seen when we created the token uh I think think 90% of the supply was set aside for liquidity um so that sits in the smart contract and then when we hit that button we actually take those tokens and we set up a single side liquidity pool on uniswap B3 and so now as we're basically waiting um what's happening is that liquidity is getting created on Unis Swap and because it's one-sided um you actually can't sell the tokens until someone else buys into them um but that's not really an issue so it's been a few seconds I'm going to refresh this and there we go tokens Now liquid um so I'm going to come back in here copy the address again the address is going to be the same but I just want to grab it out and basically what I'm going to do is go to my I guess I'm gonna have to recopy it but I'm going to grab my wallet address I'm going to throw it in here uh and I'm going to hit withdrawal token and so what's happening here is we're basically taking uh this app specific server wallet that metal spun up for for me as a user and we're moving the tokens from that into whatever withdrawal address is provided and so if I come back up to my wallet and I go to Bas scan I can throw my address in here and I can see that 23 seconds ago I was transferred five Workshop tokens perfect um and so you know hop back here real quick grab the address for the workshop tokens and then I'm going to go to uniso um make sure my wallet's connected come down here make sure that I switch to network to base and we can see that we have the workshop tokens live on Unis swap so if I wanted to I can do you know 0.1 and I can swap myself some work chop tokens um and you may have noticed that [Music] the you may have noticed uh some warnings with the Unis swop um that's just because it's a one of the first transfers um of that token so you know they they have warnings around you know low liquidity tokens brand new tokens just to prevent issues um but once the token is interactive with enough uh those will start to go away and so now we have uh this swap pending and hopefully soon that transaction should land all right well the swaps done uh we have it in here um I don't know why it's still pending in the unisoft app but yeah so at this point we have gone through the entire flow of creating a token Distributing it through a through an application um withdrawing it to a secondary wallet creating the liquidity on Unis swap and then actually trading into that liquidity and so from here um you can continue to sort of build out the the app flow or the front end in vzer or you can actually take this code pull it down um and work on it yourself and this is a super easy way to kind of get started with tokens in a in a begin app um and it's kind of the quickest way to get tokens in the hands of your users or to at least experiment with uh new ways to kind of distribute tokens whether it's games whether it's content um whatever it might be so um yeah thanks for watching our Workshop uh if you guys have any questions definitely feel free to to contact the metal team um go to our website metal. build um we have a great docs page and um if you need any help feel free to reach out to me personally I'm [Music]