ETH SD x Thirdweb: How to Use Thirdweb

Transcript

Showtime. Test. Test. All right, welcome everybody. I have a couple quick announcements before I give the stage to ETH San Diego. Uh, first of all, happy Star Wars Day. May the force be with you all. Yes. Yes. Yeah. Um, [Music] um, I do have a announcement. I'm doing a giveaway for a Star Wars NFT actually. So, I am an NFT artist. I just dropped six one-of-a-kind handdrawn NFTts, and I'm giving one away for attendees of this meetup. And anyone who retweets uh and likes this little baby Grou. Um,

yeah. So, this is one of six. What's up? Yep, this is the tweet. So, to win the Grou, like and retweet this tweet. And then also if you want an extra um entry, go ahead and RSVP to this event, which I'm assuming everyone did here. But we're going to be announcing the winners tomorrow. So uh would love your support on that. The other announcement I have is Edge is we're conducting a survey. We're doing some market research. Um as many of you know, we don't collect any personal data within our application. So, it's important for us to, you know, talk to people IRL and and kind of get a good grip on, you know, what you think of our app, what, you know, you think of our product. So, um, if you are interested

in taking this six minute survey, go ahead and link up with Paul or Peter in the back. And we're giving Edge socks to anyone who's willing to take the survey for us. Ed edge socks. They're pretty swaggy. Um, without further ado, I'm gonna go ahead and intro Chad onto stage and he'll bring up our speaker. Yeah, let's go, guys. [Applause] All right, it's not much to say here. I think I know everyone in the audience. Um, but really, uh, I'll just talk briefly about the event. Uh, it's going to be a technical session on third web.

Third Web is an SDK to help uh web 3 builders uh integrate um you know blockchain into their application whether that's tapping into RPCs uh tapping into wallets or uh all the different nuances that comes with blockchain development. So third web is meant to make that easier uh for developers. So we'll have Jared Watts tonight uh joining us to go through a um high level of what third web is and then a technical demo. So if you guys have your laptops it'd be cool to have them out. Um, without further ado, I will pop into Zoom. We might have a few technical difficulties. I don't think so, but uh, just bear with us while we get Jared on and then when he comes on, let's give him a round of applause. All right, just to welcome him to San Diego. All right, thanks guys.

Recording in progress. Yep. Sweet. All right. Feedback. All right, guys. Let's Let's give it up for Jared who's joining us. Sweet. Uh, do you want me to share my screen? I think you might need to enable it for me. Oh, yeah, for sure. And feel free to do a quick intro. You're live right now. There's a little bit of feedback. Okay. Well, we're live already. All right. Sweet. Yeah. Um, so I'm Jared. I'm here today representing Third Webb. And if you don't know what Third Webb is, uh, you're about to find out all about it today. We are, uh, a web 3 company. We provide developer tools for the full stack, the full spectrum of

creating productionready uh user loved web 3 applications. And what I'm going to run you through today is kind of uh the business side of what is third web if you've never heard of it before, what we're about, what our culture is like, and then uh if you can stay awake through the slides, we'll jump into a bit more fun of a technical demo. I'll walk you through utilizing some of the web's tools and creating a full stack web 3 application. So once we've created that app, uh hopefully you've fallen in love with the web by the end and you'll have a lot of questions for me and I'll stick around to answer all of those questions that you might have. So I'll go ahead and share my screen here. Let's see.

Cool. That looks good. All right. And then I click this button here. Sweet. All right. Hopefully bring open the chat. All right. Let me know if that looks good. It doesn't just yell out at me. So, what I'm going to walk you through first is kind of the background of Third Webb, what our company is all about, and what our tools kind of offer for you as developers. and then we'll we'll walk through the demonstration at the end to kind of uh put it to the test and kind of showcase what these slides actually talking about. So here's kind of in summary if we had to summarize third web into one little picture. We have kind of every uh tool for you to

create web3 applications and that includes tools supporting everything from the blockchain, the connection to the blockchain all the way to deploying your application in a decentralized manner. So let's go ahead and I'll just give you a quick introduction to what the web is from kind of a business or a culture perspective and then we'll dive into what it can kind of offer for you as a developer. Awesome. So, Third Web as a company, it is digital first or remote first. And what that means is essentially we have a head office in San Francisco. We have an office in New York. But at our heart, we are a remote first company. So hopefully by my

accent, you can probably tell that I'm not in San Francisco. I'm based in Australia. And we have uh employees all around the globe. We have people from Spain Argentina London uh India all different places across the world. And, you know, as you can see in this little picture here, everyone's wearing some third web swag. We love to get together and kind of do some hack weeks and things in San Francisco. And but at its core, we are digital first, remote first. And part of that comes with our kind of culture principles that we are fully open sourced and we welcome contributions across all of our tools from anyone in the world regardless of your skill level. So if you are looking

to uh kind of contribute to the web3 world uh we would love to have you as an open source contributor. Awesome. And what do we actually do? So why was the web created initially? The web was created as a company called NFT labs in 2019. Um, and it was kind of just this tool that Fukhan and kind of the founding engineering, sorry, the founding team created as a solution to address this kind of blow up of NFTTS in the world, right? And NFTs were the new hype thing and it was really hard to make NFTts. So NFT Labs was born and thankfully they changed the name from

NFT Labs which I think is terrible to third web which is what the company is today and since it was founded in 2019 a lot has changed. It's gone from NFT focus to creating full stack production ready web3 applications that kind of address the web 3 core principles. So we want to create decentralized permissionless applications and everything that we created is fully open sourced, fully permissionless and fully composable. None of the tools that you use with thweb are kind of locking you into third web. Everything is just kind of an interface on top of the actual blockchain. So if the web goes bankrupt

tomorrow, I'll be sad because I don't have a job. But as a developer, if you're using third web, everything is still going to be on the blockchain. It's just kind of a way to more easily deploy these decentralized applications and you don't have any reliance on the tools is one of our core principles. You know, if we disappear tomorrow, none of your tooling or none of your applications are going to disappear alongside us. So that's kind of what we do. Our mission is to really spark growth and innovation in the web 3 space. We really want to grow Web 3 as a whole. We truly believe in the movement and the things that Web 3 stands for and we want to grow this space together.

Cool. So that's a lot of like fancy business buzzwords, but what do we actually do? So early on we've recognized that web 3 development is really hard and that's why we've created this company. We've recognized that there's a lot of background and contextual knowledge that you need to actually even get into the web 3 space. And that comes with things like creating a wallet, what an NFT is, what the blockchain is, what IPFS is, all of that kind of context that you need to even enter the web 3 space as a user, let alone a developer.

And as you kind of enter the state where you're going to be creating these applications, you realize that hey, there's actually a lot of pieces of the puzzle that goes into creating uh even web two applications, let alone decentralized web 3 applications. And what the web's goal is is we've created a suite of products that really simplifies this whole stack. And we've created products that address each piece of that puzzle to create these kind of production ready web3 applications that are decentralized, permissionless, and composable.

Awesome. So, here is another little pretty picture that kind of summarizes in more depth what our product offering is. So, each of these little pink purple icons here, excuse me, represents a product that we offer. So this kind of ranges from everything from creating and deploying smart contracts to the actual blockchain itself and the connection to that blockchain all through the visualization of what's happening on your smart contracts through to the creation of things that users are interacting with.

And that includes things like games, mobile apps, web applications, Shopify stores, really whatever you want to create, we have products and solutions that can kind of power those tools. And if I skip ahead one slide here, we're kind of providing the foundational layer for every part of the Web3 application stack. And this allows support for you to get off the ground more quickly to build out these full stack web 3 applications for a small side project or a small startup and get off the ground quickly. But we're also powering some of the world's biggest brands in their web3 journey. So you can

see some big names on here like Rarable, Coinbase. If you're a gamer, we have 100 Thieves Fanatic. If you're a basketball fan, we have the Knicks and the Chicago Bulls and many other brands on here. So, it's awesome to see uh some of these brands that we're powering their experiences. So, what this kind of represents is, hey, I'm a developer. I'm building these side projects using the web. Helps me get off the ground quickly with all of this broad coverage, but it also takes me to that full scale where, you know, these companies are serving hundreds of thousands of users using our tooling.

And if I go back back in time in the slide deck here, what we're really doing is we've recognized, hey, there's a lot that goes into actually creating a web 3 app. And that starts from the connection and the deployment of smart contracts to the blockchain. If as many as you h sorry as many of you probably already have deployed smart contracts to the blockchain it's quite difficult to even get into that space and deploy smart contracts to the blockchain of your choice. And we've made it simpler with the RPC connection to the blockchain. We have a CLI that allows you to deploy smart contracts to the blockchain. We have a Solidity SDK

that allows you to create contracts and then deploy them to the blockchain. And we have a series of pre-built or ready to deploy smart contracts for a kind of no code solution where we have audited smart contracts to actually go ahead and just click those on the UI and they go straight to the blockchain still 100% owned by you. After you've deployed your smart contract, we help you kind of visualize what's happening on your smart contract. You can visualize all of the events, all of the tokens, everything that happens on chain is represented in a dashboard and you can see exactly what's going on in kind of this visual tool where you can view things like the NFT metadata,

the events that are being transferred in real time. You know, if there's uh a sale of your NFTs, for example, you can see that happen all in this dashboard here. And what we've really done is we've made it much easier to visualize what's happening in your application. And that is powered by the analytics. So you can see the growth of your smart contracts over time. What's really happening in your smart contracts if if NFTTS or tokens are being transferred?

If people are selling, if people are buying, everything is visualized on the dashboard. Once you've kind of left the smart contract development space and you know what's happening, there's a lot more tools that come into play when you actually want to create something that users are interacting with and that comes into the web 3 space. So to power web3 applications including web apps, mobile apps, games, stores, everything that users interact with, we have a suite of tools such as the wallet connection, the UI components, SDKs for the most popular languages like React, TypeScript, Python, Go, and we have all of these tools to help you actually

interact with those smart contracts that you've deployed. Now the best thing is for me a lot of developers don't want to kind of lock themselves into third web tools and while we do offer all of these pieces to create a full stack web 3 application the good thing about it is you don't have to use only third web's tools. It's designed in a composable manner where you can kind of substitute any of these pieces with other tools or custom solutions that you're more familiar with or more comfortable with or you think is better for your users.

So for example, if you wanted to create an app with the web, you can substitute your own wallet connection or your own RPC or your own gas solution into the web suite of tools and you can kind of plug and play with different parts of the ecosystem in creating these web 3 apps. And to even kind of take it a step further, let's say you only really want one part of the web's tools. You don't want to use all of the tools that we have available. only want to say, "Hey, I I like Thwe's RPC. You know, the RPC has support for around 800 chains.

That's awesome. That's what I want for my app. I'm just going to install the Weweb's RPC or utilize that one piece that the Weeb offers and plug that into my app." So, all of these kind of standalone products and they all work together and they're all designed to be substitutable for custom solutions and other solutions in the web 3 space. Awesome. All right, so that's enough time on that slide. Before we dive into the demo, I just want to show you one more thing that's kind of representing what we're going to be building in the demo today. And that is kind of life without third web compared to life with third web.

And the example that we're looking at here is displaying NFTts on a contract. So let's say you want to create a application that reads NFTts from your smart contract and displays them for your users. Pretty simple in theory, but when you actually dive into what exists today, and maybe a lot of you are already familiar with this, it's not as easy as it seems, right? So on the left hand side, we have without third web. And in step one, we're saying copy the AI of the smart contract, which I would argue there's even three or four steps before this that you need to create the NFT smart contract, find an RPC provider

to actually get a connection to the blockchain and deploy it to the blockchain. So, it's already two steps before we've even got the AI. you're probably wanting to pay for maybe audits or, you know, some security measures to say, "Hey, is my smart contract even secure? Are my users going to be safe? Is this gas optimized?" And there's a lot of steps before you've even gotten to this first step here where you're going to copy the AI. So, let's pretend you've gone through that full process, said, "Hey, all right, I'm ready to build an app now.

I'm going to copy the smart contract API which represents everything that the smart contract can do and I'm going to use a library such as ethers to actually create an instance of that smart contract so that I can start interacting with it. Probably your smart contract has a function on it to get the total number of NFTts that have been minted and you're going to first say hey I need to know how many NFTs are on that contract. So let's make a call say get get the total number of NFTs. So that's one call already. For for each NFT that comes back, you're going to say, "Hey, I got a 100 NFTts. Each of these, let's make a request to fetch the metadata with a networking library such as just a regular fetch or maybe using Axios or

something like that to actually fetch that URL and get the information back. This is kind of ignoring things like loading states, things like error states. Maybe some metadata fails, maybe some comes back slower than others. maybe get rate limited, things like that. This process kind of takes hundreds of requests, sends them out to actually get the information of each NFT. Then maybe you want to present the owner of each NFT. So you're making another couple hundred requests to say, hey, can I get the balance of or the owner of this token ID? So you've already made a few hundred requests without handling things like errors, loading states. You somehow need to assemble these requests together as they

come back into an array or a list of NFTs. And then you get to step seven, which really sounds easy, but hey, one NFT might be a video, one NFT might be an image, one might be a 3D model or just a file, right? Not NF, not all NFTs are just images. So you need to say, hey, is this u the buy type? Is it a video? Is it an image? Is it a file? and figure that out all on the client and say, "All right, now I'm going to render a video. I'm going to render an image. I'm going to render a model." And all of this is really complex. And the kind of point that I'm getting to here is that the web offers you all of these solutions that you can fully inspect.

It's 100% open source. And what do the web really does is we have a team of engineers that are dedicating their day-to-day lives to write code like this for most common operations. Right? So if you install thirdwe and kind of compare the process, you already have a pre-built NFT contract that is audited and gas optimized. You've deployed that. We've provided the RPC to deploy that to the blockchain. We've provided RPCs for every EVM compatible chain. We provide you a dashboard so you can view what's going on on your contract after you've deployed it. And then once you actually go to build the application, we're going

to provide you a set of React hooks or a TypeScript library, a Go library, a Python library, whatever language you're most comfortable with to perform all of these operations in really one line of code. So let's say today we're going to use the React SDK. All we need to do is say, hey, use contract that connects to your contract. No APIs. The API is resolved behind the scenes for you. You just put your contract address. So there's one line of code. Second line of code is use NFTs. That's essentially performing all of these steps on the left hand side in one line of code again. So you now have two lines of code to get all of the NFT metadata, pass it through the blockchain with an RPC,

resolve all of the metadata URLs, put that through an IPFS gateway, so you don't have to manage any of kind of the fetching, and this hook also comes with loading states, error states, retries, refetch as new data comes in, and all of these other benefits. And third, we have UI components that can actually handle this step seven here that says, "Hey, is this a video?" Then it's going to display a video. If it's a 3D model, it's going to display a 3D model on the UI. And all of this is kind of covered in literally three lines of code. And if you don't trust, you know, what's going on, what's what's actually happening under the hood with these

functions, all of it is completely open source, and you can customize the functionality as you choose. All right. So, that's a lot of talking, but what we're going to do now is I'm actually going to demo what we've talked about in this process here. So, I'm going to go ahead and create an NFT smart contract. We're going to deploy it to the blockchain and then we're going to build a application that shows all of the NFTs and displays them on the UI. Awesome. All right. So let's bring up the terminal here.

And what we're going to do is I'm going to show you first a couple different ways you can actually deploy smart tracks. So if we go to third web's website, you can see we have this product section where we have the solidity SDK, we have the explore page, we also have this deploy CLI. So the Solidity SDK is if you want to create your own Solidity smart contracts. We have these kind of out of the box base contracts and extensions that you can plug and play for things like NFTTS, royalties, permissions, uh NFT drops or tokens, all of kind of the most common use cases for you to actually build your own smart contract using Solidity. If

you're more of a no code kind of person or you just prefer to have something that's been audited and is trusted by you know tens of thousands of users already we have these ready to deploy contracts that we consistently get audited to say hey here's the most common use cases in web 3 things like NFTTS tokens marketplaces Dows all of these most popular use cases we have you know put the time in from our contracts engineering team to say here's the most gas optimized audit version of the smart contract with you know uh complex functionalities you can actually just deploy them without coding at all and you can just use that uh from the dashboard that I'll show you in a second here. The third kind of option is, hey,

I don't really care about the web's contracts. You know, I know what I'm doing. All I want to do is just deploy it. And this comes in with the CLI where you can actually just deploy your smart contract that you've already created without a connection to an RPC, without your private key. This is going to take you through the dashboard where you can deploy to any EVM compatible chain. Given the audience that we have here today, I think you're all somewhat technical and maybe you're most interested in kind of seeing how can we build our own contract with solidity. So what we're going to do is we're going to use the CLI which is just called npx third web and if we say npx third web help this is going to give us a bunch of

different commands that we can use to interact with the web suite of tools from the command line. So you can see here one of these commands is called create. So what we're going to do is we're going to say mpx third the web create and this is going to oh sorry Siri want to Siri wants to jump in. Actually I'm going to create a new folder just so we don't get lost here as well. Uh so CD into that and what we're going to do is mpx the web create. Awesome. So this is going to kick off this kind of interactive CLI to say, hey, do I want to create an app? Do I want to create a smart contract? Or as a third option, do I want to create an

extension contract, which is kind of in the theme of upgradeable contracts, but we're not going to get into that today. To begin with, we're going to create a smart contract. So let's select contract here. Give our project a name. Let's just call it the web contracts. Which framework do I want to use? I'm just going to use hard hat to keep it simple. give our contract a name. We'll keep that simple as well. And here you can see what what kind of contract do you want to start from. And you can choose from NFTts, tokens or uh semifundable tokens, which is just uh NFTs with multiple quantities. For us, we want to create NFTs. So, let's select ERC 721. The final question here is, do we want to add any kind of extensions which allows us to add more

functionality to our NFT contracts? So you can see down the bottom here, for example, you could add a drop, which would allow your users to claim or mint the NFTs that you're lazy minting. So you would upload the metadata and other people would mint the NFTs. But today, we're just going to keep it really simple. We're just going to create a basic NFT contract. All right. So now that we've submitted that, it's going to create a new hard hat project for us with a NFT smart contract inside. And what we're going to do is we're going to open that up in Visual Studio Code here.

And oops, ignore that. And then I want to save. Let's risk it. What we're going to do is we're going to open up the repo. Sorry, the folder that we just created. That's going to be in here. Awesome. So, we're going to open up this third web contracts repo that we've just created from the CLI. I'll just close all of these uh background ones. Sorry about that. Yes, site. Trust the authors. Awesome. All right. So, now if I zoom in here for you, you can see this is a project that got created for us.

And what it contains is a very basic setup with a simple smart contract inside. And this smart contract imports our base NFT smart contract. You can click into this and see all of the source code. Again, this is all completely open source. You can see functions in here like minting NFTs, batch minting NFTs, burning NFTs, getting the owner of an NFT, and all of this is open source. And again, completely customizable. So, you can see uh let me know if this is not zoomed in enough. It's like couple lines per screen for me. But you can see here all we're doing is saying hey this is a contract within the constructor when this contract gets deployed all we're

doing is saying hey let's initialize that NFT contract with a name that we provide with a symbol that we provide who's going to receive the royalties and how much royalties are they going to receive. So we could go ahead and customize this as we choose. So, we're going to add uh some function that says add a function that says hello world. Um, thank you, Copilot. And we can just add anything we want. We can completely customize this in any way we want. Uh, but what we're going to do is we're going to just go ahead and deploy it.

All we need to do is back at the terminal, we just say npx.web deploy. And this is going to sorry I'm in the wrong thing here. So from the uh folder that you've created the smart contract just run npx web deploy. This is going to detect any smart contracts that are in this current directory. So you can see now it's found the my contract smart contract which is the name that we called it in line number six here. You can see contract my contract is what it's detected.

It's then going to say, hey, I'm going to upload this smart contract to IPFS. And then what it's going to do is say, okay, we've compiled it. We've uploaded it. This is all working for me. It's going to print out a URL that's going to allow us to deploy it. And you'll notice I've never put my private key in here. I've never initialized an RPC connection. I've never created a script that says, "Hey, here's my private key. Do something." None of this is kind of risking any of your private values. So once that process is complete, you can see upload successful. Open this link and I open that up. What it does is brings us to the dashboard here. And you

can see if we connect our wallet here, just go ahead and connect my MetaMask. What we can do is connect our kind of browser wallet. There's no private key. Again, we select the network or the chain that we want to deploy our smart contract to. So, if I go ahead and click this, I can choose any EVM compatible chain. So, I could go Polygon Optimism Binance Phantom Avalanche, any of the EVM chains including the ZK EVM. So, you could do Polygon ZK EVM or scroll ZK EVM. any of kind of the latest innovations. All you need to do is just click deploy now and we get pass the wrong number of

constructor arguments. Okay, so it doesn't look like we entered our arguments here. There we go. This is this is looking better. So, as you can see in our smart contract here, we needed to provide these name symbol and royalty recipient. I'm not sure why that didn't come up uh previously, but what we're going to do here is let's say let's use my contract address as the royalty recipient. Let's give me 5% of the royalties. Let's call our NFT collection my Epic NFTts. And each NFT is going to have a symbol of Epic. And what we're going to do then is we'll go ahead and deploy this smart contract with these constructor parameters. So,

we'll click deploy. Now, this is going to first actually prompt us. Oh no, I'm out of money. Prompt us to deploy our smart contract. It looks like I don't have enough funds here. So, maybe let's change network to the Mumbai network. And let's try again here. Hopefully, I have enough Mumbai. There we go. Cool. So, on Mumbai, it's 1 cent. Luckily, I can afford that. And all we need to do is confirm this contract deployment transaction and that is going to ship our smart contract to the blockchain. So hopefully Polygon is nice to us today and speeds this test net process up.

Looks like that has gone through. And then you'll notice this second step says adding to the dashboard. And this is just going to allow you to view the actual smart contract from the third web dashboard. And we cover the gas costs for this step. So all we need to do is just sign this. We'll pay the gas fee for you to view it from the third web dashboard. And from there you'll be able to see all of the events, all of the NFTts, all of the functions, the source code from the actual third web dashboard. So you can see we've successfully deployed the contract. And now we have our very own personalized dashboard for our smart contract. And you can see in this contract checklist, first step is complete. We've deployed the contract.

Since it's an NFT collection, hey, do you want to go ahead and mint an NFT? I think I do. So, let's go to the NFTs tab, and we'll mint our first token. To do that, we'll just click this mint button here. Let's uh upload an image. Let's say blue circle for our NFT. So, let's say blue circle. Give it a description. This is a nice round one. and even some properties. So we can say shape is circle or like sides one something like that. And then you can add any advanced metadata for things like openc and we can just click mint NFT. This is going to prompt us to

accept transaction to actually call the mint to function on our smart contract. So, this is going to upload and pin all of this metadata to IPFS, handle that all in the background. Then, it's going to say, "Hey, let's use this IPFS URL that we just uploaded our metadata to and call the mint to transaction with that um IPFS metadata. So, let's go ahead and confirm this transaction. And we're going to mint this blue circle NFT to our contract here."

And if we open up our wallet, we should see that is pending and then it goes through and we're good to go. You can see in the background here, we should see a success message. Very nice. Okay, so we've created and deployed our smart contract. We've uploaded NFT metadata to decentralized storage. We've pinned it. And now we've minted the NFT on our smart contract. So what is the next step? We're going to click this nice big build apps button here. And you can see this is going to tell us how we can use the different SDKs to actually create a interactive app that users can use to connect their wallet and see what's

going on on our smart contract. So for example, we have support for JavaScript or TypeScript, React, React Native, Python Go, or Unity if you want to create some games. I'm going to go ahead and select React. If you already have a project created, you can just install the dependencies that we have here. For me, what I'm going to do is just go back to our terminal. Let's go up a directory and we'll run npx the web create again. Instead, this time we're going to select app and we'll just give it a name of the web app. We can select which blockchain we want to use. So, we do have support for Salana. Today, we're using Polygon.

So let's select EDM. And you can choose which framework we want. So do you want create React app, V, React Native. For me, I'm going to choose Nex.js just because that's what I'm familiar with. And then you can choose between JavaScript or TypeScript. I'm just going to lock in Nex.js and TypeScript. Give us a nice little foundation. What this is going to do this time, it's going to go through a similar process where it's going to set up this directory for us where the third web tools are installed. So last time we said okay let's create a contract. So we installed the webb solidity SDK. This time we're creating an application. So we're going to install the web uh react SDK this time since we're creating a

React application. So you can see here we're kind of accessing a different part of the stack that we saw in this slide here. Sorry that's probably pretty small. Oh no, I started from the beginning. There we go. So you can see initially when we created the contracts, we accessed contract kit which is our solidity SDK. We saw the dashboard which is how we deployed our smart contract. We saw deploy which was npx the web deploy which allowed us to ship our smart contract to the blockchain without any private keys without an RPC and things like that. And that's powered by our RPC edge. So we provide RPCs for every EVM chain.

What we're going to see now that we're creating a web 3 application is we're seeing this SDK part of the stack here which is our web 3 SDK which encompasses the gaming SDK, the React SDK, Python Go, etc., etc. What we're also going to see is the UI components which we're going to use for connect wallet as well as our wallet SDK which is powering that UI component. And you could also include any of these kind of other parts of the stack that probably won't get to today like authentication, decentralized storage, the on-ramp, the gas list, and the data feeds. So, if we go back to our terminal, you can see now our application has been created. We can

change directories into the web app. And let's open this up now. So, we'll open the web app this time. uh dev testing test five and you can see now we have third web app so let's open that up and this time you'll notice it's not a smart contract directory instead we have a react application so what we can see is if we run this let's just run it on our local host here this just gives us a boiler plate with the third web SDKs installed So since we chose React, the React SDK is going to

be installed and that also includes the UI components such as this connect wallet button that we're seeing here. What I want to do is go back to our slides and our objective was to render all the NFTts on our contract. So step one is we actually need to get our contract. So let's delete all of this boiler plate here. And the first step is we're going to say step number one is actually connect to the contract. And this is going to use our React SDK's React hooks to connect to the smart contract with its address.

So what we're going to say is con contract is equal to use contract. And this is just going to be imported from the React SDK. So you can see on line one here, this is now importing use contract from our React library. And if we open up these brackets here, all we need to provide is the contract address. So if we go back to our dashboard, uh too many tabs open here. There we go. My Epic NFTs. You can copy this uh contract address to the clipboard here.

So let's click that and go back to Visual Studio Code. All we need to do is just paste that in here. And if we go to the app file in C, we need to define which chain we actually deployed the smart contract to. So you can see right now it's set to Ethereum mainet. All we need to do is just change this to Mumbai since we deployed to the Polygon test net which is just called Mumbai. Now what we can do is let's console.log log the contract and we'll open up our local host again and let's inspect to see kind of what we have going on in our console here. So you can see this is

probably really small so let's zoom in. Um you can see now we have the smart contract and what's really interesting is we've pulled the API for you from the chain ID of 80,0001 which is polygon Mumbai. So we behind the scenes have said okay here's the smart contract address on polygon Mumbai let's grab that AI get all of the information for you to use if you remember we created an NFT collection contract so now what we can do is we can actually say first option is to say contract 721 and then you can access all of these functionalities of that NFT contract.

You could say uh get all is one option and you could use query parameters to say hey I want 100 NFTs this this time that is going to return all of the NFTs. So it's literally two lines of code but with the React SDK we actually have an even better option which is to get all the NFTs and their metadata and their owner. So what we're going to do is going to say const data is equal to use NFTs and we'll import that again from the react library. All we need to do now is just pass in that contract that we connected to. So we'll say get all the NFTs of this contract here and we can rename data to say let's call

that NFTs. And now let's console.log the NFTs. So if we scroll down now you can see we have an array of NFTTS from our contract. You can see all of the metadata is being pulled in. So you can see have the name of blue circle and we have the oops sorry we have the description we have the attributes that we said were the shape and the sides and we have this image that is pulled through third web's IPFS gateway. So if we open this up in our browser, you can see that it's just a regular URL where we can see the actual image. We don't need to do any manipulation to say, hey, is this an IPFS URL? Is it not? This is all automatically handled under the hood

for you. You can see we have all of this information such as the owner. So it's gone and got the current world address that owns this NFT as well, the supply of this NFT, which would be relevant if it was ERC 1155. I have the type. All of this information is loaded automatically for us. What's even better about this though is let's say I wanted to show a loading state. I can grab this is loading flag. But what if something goes wrong? What if I mess something up? Can also grab an error. So for example, let's say we messed this contract address up. We deleted the last letter, which would be C, and we said, I messed this up now. I can't actually get those NFTts. Let's print out what went wrong.

Let's say P error and let's print that out. So that is undefined. Sorry, that is not what I wanted to do. I wanted to say so let's say is loading. If it is loading, then we'll say loading. If it's not, then we'll say an error occurred. We'll say error is loading. If it isn't loading, is there an error? an error occurred otherwise let's say hey something went right or null here I think I messed this up didn't I an error occurred okay sorry this syntax has gone too messy but the

point I was trying to make was if something goes wrong you can actually display the error and you also have this loading flag while it is loading so let's let's give it a success case so let's add that seed back to give it the right contract address. So let's say if it's loading and we'll say loading otherwise we say loaded NFTts and close that P tag off. So now if quickly reverse you'll quickly see a loading state. If something went wrong you'll be able to print that error on the uh screen here. I'm not actually sure how to trigger off an error. That's what I was trying to show you.

um not actually sure how to get this error to occur when something goes wrong. Um once we've loaded the NFTs, we're up to the final step. So we have all of the NFTs in our console here. How do we actually display them? So we've loaded the NFTs. Now instead of saying loaded NFTs, let's turn this into a div. What we're going to do is we're going to use the web's UI components and that is also imported from the React SDK. If we go to the documentation here, jump into React, we go to the UI components here, you can see we have an NFT renderer UI component. So, we'll import the web NFT

media from the React package here. Paste that in. And now what we're going to do is we're going to map over all of the NFTs that come back. So we're going to say NFTs map get each NFT transform it into that NFT media component. So we're going to say NFT transform that into third web NFT media. Only thing we need to provide here is the metadata. So we're going to say NFT metadata. And we'll close that off. Then we'll just close the div. And now you can see in this kind of conditional logic we're saying is it loading? All right. Then let's just show maybe a P tag would be

better here to say just show some text saying loading. Once it's loaded then we can say all right now we know we have all of the NFTts. Let's transform each of them into this component here. You can see in the description it says it's going to grab the metadata and say, "Hey, is this an image? Is it a video? Is it a audio file? Is it a 3D model? Is it a file? Is it just some text?" And it's going to render whatever component it finds onto the UI. So for us, it's going to render an image of our blue circle. So let's go back to localhost 3000. You can see if we refresh, it's going to say, "Hey, I'm loading it up." Loading it up. And bam,

there we go. It is loaded the NFT metadata onto the UI. We can do this the same thing for not just the image but if we add some more information here we can say maybe we want the name of that NFT. So we say NFT metadata name. We could say beneath that I want the current owner of the NFT. So we say NFT owner. And let's print that out onto the UI. So you can see we have the image here pulled down from the smart contract resolved from IPFS put through the IPFS gateway. It picks which kind of component to show on the

UI. So if this was a video we'd see a video playing right here. And then all of the metadata comes along with that easily accessible in this kind of object. And you can also pull things like the NFT owner, the type of the NFT, the properties of that NFT. Really, everything stored both onchain and offchain is made much more easily accessible in this kind of SDK environment here. So you can see we've literally written two lines of code to connect to the smart contract, get all of the NFT metadata and the owners, and then we have kind of literally one line of code to say, "Here's what I want you to do with that NFT. I want you to render it on the UI and say whatever

kind of NFT that is, print that out on the UI for me. I can also access any of the metadata as well as the owner on the UI here." So, we've completed our objective now and it was pretty much three lines of code. So, one, get it, get the NFTs, and then render the NFTs. And that brings us back to this slide where you can see how much easier that was. We've literally gone from nothing to deploying a full stack application in kind of, you know, uh, under an hour now. And you can just imagine as I'm sure many of you gone through this previous process without third web before where you've used tools like ethers.js or you know provided these hardhead scripts with your private keys.

This flow is just kind of so much better and it's so much easier so much more secure to actually use the web's tools to achieve these same processes. And as I've said, you know, as developers, we're curious. We're skeptical of all of these tools that people like me are trying to sell you to use. I don't know what these things are doing under the hood. And you can actually click into any of these functions, view the documentation, and if you go to the documentation on the overview page, you can see, hey, this is open source. You can actually view everything that's going on in this GitHub repository. So we go to our React package here and let's say dive into the

source. We go to EVM. Go to hooks. Let's say I want to know what the use Coinbase wallet hook is doing. You can actually just see exactly what's going on in each of these functions that we've used and each of the components that we've used in this kind of quick example here. So if you want to customize any of this, if you want to substitute any behaviors, you're completely free to do that and you know exactly what's going on at every step of the way. So that is it for the demo. I'm glad that went mostly smoothly and uh I hope that was kind of enjoyable for you as well. And um yeah, maybe let's move into some questions. If you're happy chat, I'll let you take

Thank you. Thank you. That was fun. Can you Can you Can you hear that? I heard some. All right. Uh, was it was it a question? I don't think I heard the uh the actual question. If that was Who has questions? Anyone? Hey. Yep. Okay. Can you speak to I also can't hear you if you're speaking.

Can you hear? Yeah, actually let me uh turn the volume up. All right, I can hear someone speaking. Let's let's try it out. Just don't be in front of the speaker though. Okay. So yeah, my question was uh are you familiar with the unlock that you guys have integration with unlock? Integration with what? Sorry. Unlock. Oh, unlock. Yes. Yeah. Um I don't know if you can speak to that. I just find it interesting like in terms of like set me setting memberships and using contracts and the table.

Yeah, I can definitely speak to that and maybe I'll I'll share my screen again here. Um, so unlock uh if we go to the explore page here, you can see have this membership. So the explore page has these kind of smart contracts that are made by both third web and these open source protocols uh from the community or the broader web3 space such as unlock. And you can see if you click into this here, you have the um membership NFT smart contract. So I believe the way that this one works is you create a regular ESC 721 NFT that has kind of specific properties within that NFT. And what it does is you kind

of create this time. So you specify an amount of time that each NFT is going to have. So you can see here if we go to deploy it's going to ask us to specify the membership duration. So for example this one is two two million uh seconds for example. So two yeah two something seconds which converts to 30 days. So the NFT has a specific property that says, "Hey, after this membership expires, this is only going to be valid if a specific property is true. And when this membership duration is over, that NFT is no longer going to unlock a specific property. So you could build

like an NFT gated website where only owners who have valid membership NFTts can access that content. And this is all deployable similar through the process that we went today where all you need to do is say here's the parameters of the smart contract. And this looks a little more complex obviously than the one we created. But once you've populated that, all you need to do is just go through the same process, connect your wallet and deploy the smart contract. And then you'll have this uh I think I've lost it now. Oh, here it is. You'll also have this dashboard that has the NFTs tab, has the overview tab, has the build tab, and you'll be able to go through uh this kind of exact same process of what we've done today. Um hope yeah, I hope that

answers your question. I'm not sure if there was anything specific that you wanted to know about unlock or our integration, but yeah, let me know if you have uh any more questions. Uh, hey there. I missed the beginning. I was curious if Third Web has any e-commerce integrations with platforms like Shopify or something like that. I couldn't hear that one. Sorry. Uh, integrations with Oh, Shopify.

Shopify. Yeah. Yeah. Okay. So, we we actually have this product called Commerce Kit. And so if you go to the the homepage here and you go to solutions, we have this page for commerce kit. And what a solution is is really it's just a combination of our existing products uh oriented towards a specific use case. So in this example, commerce kit is how you can integrate the kind of SDKs, our dashboards, our smart contracts in the purpose of creating an e-commerce store.

And what we kind of have is for example, if you scroll down into this guides section here, you can see we have things like how to create a token gated experience on Shopify. So you can use in this case it would be our existing NFT collection that we've created. So you could go through the full flow to say here's our NFT collection that we've deployed using all of our existing tools that we've kind of walked through today and then plug that into a Shopify store. Or you could use NFTTS that we've created. So let's say I wanted to sell blue circles in real life. I could integrate that with the Shopify store to say, "Hey, let's read product

information from this NFT collection." Or for example, say let's sell or transfer or ask users what their wallet address is every time they buy a blue circle from the Shopify store and transfer them a blue circle NFT. And you kind of have these integrations with uh really anything, but we have these kind of specific integrations with Shopify. And I believe we're actually coming out with a template very soon that allows you to create uh a full kind of application with the Shopify SDKs under the hood that allow you to create this kind of e-commerce website with web three capabilities. Um I don't have full context of when or or what that

encompasses but I know we are working on something specifically uh in this kind of commerce space as well. We got one more question here. Yep. Hear me? Okay. Mic check. Can you hear me? Okay. [Music] Uh yeah. Yeah, I can hear you.

Okay, cool. So, uh, leave it to me to ask this question, but, uh, given that everything's open source, what is the business model of third web? Uh, sorry, I was a little a little choppy. Do you mind repeating, Chad? Yeah, given the open- source nature of third web, what is the, uh, business model? Uh, I heard the open source nature, but not after that. Sorry. Oh, what is the business model? Uh it's it's just echoing like Yeah, that's a great question. Oh, you're typing in the chat. Sorry, I just

saw this. I should have been looking. Sorry about that. Um yeah, so that's a great question and the answer is uh right now we don't we don't make money directly from uh our customers, right? So if you sign up and use any of the web tools today, you're not going to be charged uh for anything. The business model is we'll be introducing third web pro or third web premium. It's a a kind of paid plan to utilize some of the infrastructure that is powering some of the more advanced features. So everything that you saw today and everything that is kind of uh showcased is all completely free and and will be free uh for the foreseeable

future. What the business model is is we're going to introduce a paid plan and I I don't have the full context. I'm not making these decisions, but it is going to be uh a paid plan that is dedicated to kind of more advanced users who want to have uh manage infrastructure by third web. But for all of the core use cases that we've kind of showcased today, none of that is going to be uh paid. But yeah, essentially the answer is we will have a free a free tier that is kind of encompassing of what most people will want and then we'll have a paid tier for uh more advanced use cases.

I I don't have like the full the full separation of what will be free and uh what will be paid. So, I'm sorry if I'm being vague, but uh I can definitely get more information on what the plan is uh for that sort of paid plan in the future. All right, one more question. Yeah, just last uh I know you have plugged about the um I believe you spoke to the account abstraction um the recent uh EIP. So, can you speak to that? What is that? What is the benefits? And third web is, you know, supporting that as well.

Yeah. Uh I heard account abraction. Do you mind filling in chat? There we go. That's that's a fantastic question. Um so today actually we announced our kind of revamped wallet connect. Uh so if you go to products you see this brand new wallet SDK section and this is kind of all-encompassing of the onboarding flow for web 3. So this includes the kind of traditional uh browser wallets like Metamas, Coinbase wallet. Uh it also includes sort of web two social login with things like email or sign in with Google and things like

that. what we've added literally today actually uh we made an announcement to say we're going to start supporting smart wallets out of the box that are sort of integrating with the EIP or EIC 4337 account abstraction with uh the alt meool. So what we've shipped is we have in our solidity SDK we have sets of smart contracts that are factories for creating smart contract wallets. So, as a user, essentially what you'll do is you'll go to the explore page, and I can actually show you this. Um, if we scroll down to the smart wallet here, you'll see we now have these factories that let

you spin up account abstraction wallets for your users. And we'll go into the simple wallet factory. For example, if we take a look at the details here, you can see this includes functionality like having multiple owners, executing transactions, uh holding tokens like NFTts and what's as a user, you'll kind of go through this flow where you deploy your own factory and then using the React SDK. If we go to the documentation, you'll go to the wallet and you click smart wallet. You can see here as part of the react you can actually say all right I've deployed my factory that allows me to generate smart wallets for

my users on demand. Then all I need to do is say in this section here, here's the factory that I've created, here's uh an API key, which is something that you can get from the web dashboard. Just so you can use our infrastructure such as the pay master and the bundler as part of that kind of ERC 4337 standard. So you can use our infrastructure for the account abstraction and then all you need to do is say here's my factory, here's the chain that it's on, initialize that smart wallet and connect to it. So yeah, literally today we added support for this. I'm I'm very excited and uh actually was working on a guide

earlier uh to kind of cover how to set this up. So um yeah, I'd encourage you to kind of dive into this and essentially the answer is we literally shipped today on the smart contract side. You can either use the solidity SDK that we showed today or you can just deploy it from the dashboard to create a factory that says all I'm doing is saying I'm responsible for creating new smart contract wallets for people. And then you can plug that into the actual UI component that we have for connect wallets. So let's say here if we look at the demo right now the default values are just these browser wallets. But what you can

do is you can actually configure in the third web provider you can say which wallets you want to support. So you can see in here all you would need to do is say I want to support the smart wallet or smart sorry yeah I think it's smart contract wallet and then your users uh can have those ERC 4337 smart contract wallets created on the fly from the factory that you control. So that allows you to control the full ecosystem of you're the owner of the factory. That means you can control the behavior of each of the smart contract wallets that

get created for your users. So you have full customization of what that factory produces. Then once you kind of have that smart contract side of it, you can easily plug that into the React SDK and have the UI components and have that kind of um beautifully designed uh onboarding flow for your users to actually onboard into web 3. Um, and yeah, we'll we'll be coming out with content really really soon for this, probably later this week or next week for a video of how to set this up properly and um some guides to set this up properly and that will be on the blog if it's not already shipped. Today we have shipped it. All right, so we

have a getting started with smart wallet guide. So this this might um go kind of more into depth than I can today if you really want to go deep into setting it up. And you can see here all we're doing is saying here's the factory after we've deployed it. And then we just say smart wallet with our factory address and connect to it. So that's I think this is probably the most uh elegant solution for smart contracts that is out there right now. And I'm I'm really excited that we've shipped this today. Hopefully that answers your question. I think I went on a bit of a ramble, but I'm pretty excited about this as well.

Awesome day. Oh, hold on.