![thirdweb](/img/default-banner.jpg)
- 219
- 880 161
thirdweb
United States
Registrace 15. 04. 2022
This is the best place to learn how to become a full-stack blockchain developer.
You'll learn how to build across every EVM chain, and become familiar with the fundamental components of blockchain development, including:
- Smart contracts
- Wallets
- Infrastructure
- Payments.
We upload new tutorials and guides every week which teach you how to build and ship working Web3 apps, including:
- NFT Drops
- Marketplaces
- Web3 Games
- Decentralised social media
And much more... Subscribe to be notified when our next video drops!
You'll learn how to build across every EVM chain, and become familiar with the fundamental components of blockchain development, including:
- Smart contracts
- Wallets
- Infrastructure
- Payments.
We upload new tutorials and guides every week which teach you how to build and ship working Web3 apps, including:
- NFT Drops
- Marketplaces
- Web3 Games
- Decentralised social media
And much more... Subscribe to be notified when our next video drops!
How to Create a Login Page For Your Web3 App (Web3 Wallets, Account Abstraction, or PassKey)
In this video learn how to create a login page for your web3 application. If you don't want to use our ConnectButton component or have a button for a user to click in order to connect to your app, but rather a login page to connect then the ConnectEmbed is what you need. ConnectEmbed give you an "open" connect modal ready for a user to connect a wallet without having to click a "connect" button.
GitHub Repo
Full repo: github.com/thirdweb-example/youtube-web3-developer-course/tree/main
Follow along repo: github.com/thirdweb-example/youtube-web3-developer-course/tree/youtube-tutorial
Documentation
ConnectButton: portal.thirdweb.com/typescript/v5/react/components/ConnectEmbed
Connect Playground: thirdweb.com/dashboard/connect/playground
thirdweb Support: thirdweb.com/support
Join our Community of over 30,000 Web3 builders: discord.gg/thirdweb
thirdweb Official Site: thirdweb.com/dashboard
thirdweb Twitter: thirdweb
Timestamps:
00:00 Demo of ConnectEmbed
02:14 Overview of how to create a web3 login page with ConnectEmbed
04:10 Getting started with course repo
05:25 Default ConnectEmbed UI component
07:15 Show a ConnectButton connected state when connected
09:20 Customize the wallets displayed in ConnectEmbed
12:45 Customize the theme and appearance of the ConnectEmbed
16:35 Conclusion
GitHub Repo
Full repo: github.com/thirdweb-example/youtube-web3-developer-course/tree/main
Follow along repo: github.com/thirdweb-example/youtube-web3-developer-course/tree/youtube-tutorial
Documentation
ConnectButton: portal.thirdweb.com/typescript/v5/react/components/ConnectEmbed
Connect Playground: thirdweb.com/dashboard/connect/playground
thirdweb Support: thirdweb.com/support
Join our Community of over 30,000 Web3 builders: discord.gg/thirdweb
thirdweb Official Site: thirdweb.com/dashboard
thirdweb Twitter: thirdweb
Timestamps:
00:00 Demo of ConnectEmbed
02:14 Overview of how to create a web3 login page with ConnectEmbed
04:10 Getting started with course repo
05:25 Default ConnectEmbed UI component
07:15 Show a ConnectButton connected state when connected
09:20 Customize the wallets displayed in ConnectEmbed
12:45 Customize the theme and appearance of the ConnectEmbed
16:35 Conclusion
zhlédnutí: 173
Video
Create and Connect a Wallet with Social, Email, Mobile, or Passkey: thirdweb In-App Wallets
zhlédnutí 467Před 7 hodinami
In this video learn how to create wallets for your users, allowing them to create and connect a wallet using social login, email, mobile number, or passkey. In-App wallets help abstract away the complexity of a user have to create a wallet themselves, write down seed phrases, or learn how to use a wallet. Simply create one for them and onboard user easier. GitHub Repo Full repo: github.com/thir...
How to Add a Connect Button to Your Web3 App (Web3 Wallets, Account Abstraction, or PassKey)
zhlédnutí 561Před 16 hodinami
In this video learn how to add a connect wallet button to your web3 app using thirdweb's Connect SDK. Easily add the ConnectButton UI component to your web3 app and allow users to connect with a web3 wallet, account abstraction, or In-App wallets. Also learn how to customize the ConnectButton UI component to match your branding or customize the options you provide users to connect with. GitHub ...
ERC-1155: Getting Started - What is an ERC-1155 and how to deploy ERC-1155 smart contracts
zhlédnutí 460Před 14 dny
In this video learn about what are ERC-1155 smart contracts and how to deploy one with thirdweb. ERC-1155 standard is a smart contract standard used for semi-fungible tokens. We break down what they are to provide a better understanding of them and show you how to deploy your own using thirdweb's prebuilt smart contracts to any EVM chain. ERC-1155: ethereum.org/en/developers/docs/standards/toke...
ERC-721: Getting Started - What is an ERC-721 and how to deploy ERC-721 smart contracts
zhlédnutí 401Před 14 dny
In this video learn about what are ERC-721 smart contracts and how to deploy one with thirdweb. ERC-721 standard is a smart contract standard used for non-fungible tokens (NFTs). We break down what they are to provide a better understanding of them and show you how to deploy your own using thirdweb's prebuilt smart contracts to any EVM chain. ERC-721: ethereum.org/en/developers/docs/standards/t...
ERC-20: Getting Started - What is an ERC-20 and how to deploy ERC-20 smart contracts
zhlédnutí 479Před 14 dny
In this video learn about what are ERC-20 smart contracts and how to deploy then with thirdweb. ERC-20 standard is a smart contract standard used for fungible tokens or cryptocurrencies. We break down what they are to provide a better understanding of them and show you how to deploy your own using thirdweb's prebuilt smart contracts to any EVM chain. ERC-20: ethereum.org/en/developers/docs/stan...
Start Building Web3 Apps: thirdweb Connect SDK - Getting Started
zhlédnutí 979Před 21 dnem
In this video learn how to get started with thirdweb's Connect SDK. We cover how to use thirdweb's CLI to create starter templates for Next.js, Vite, and React Native. Also learn how to install thirdweb into existing projects you already have. thirdweb's Connect SDK provides you with the tools to build web3 apps quick and easy. thirdweb Docs: portal.thirdweb.com/typescript/v5 React SDK Docs: po...
How to Build a Token-Gated Web3 App - Lock App with an NFT
zhlédnutí 1,1KPřed 21 dnem
In this video learn how to build a web3 where you lock contents of you app and require that a user owns an NFT to access. Using thirdweb's Auth we'll create a token-gated web3 app where a user must hold an ERC-721 NFT in order to access the contents of the app ERC-721 NFT smart contract: thirdweb.com/thirdweb.eth/DropERC721 GitHub Repo: github.com/thirdweb-example/gated-content-example/tree/mai...
Building a Multi-chain Experience with Account Abstraction
zhlédnutí 1KPřed měsícem
In this video learn how to build a web3 app with account abstraction that works on multiple chains. Normally being able to have the same wallet address through account abstraction on multiple chains would involve you have to deterministically deploy an account factory contract on those chains. With thirdweb we make this simple and out of the box ready for you to start using. ERC-721 NFT smart c...
How to Build an NFT Project - Deploy Smart Contract and Build Frontend App
zhlédnutí 2,1KPřed měsícem
In this video learn how to build a full NFT project from deploying your own ERC-721 NFT smart contract to build a frontend app to claim the NFT. Learn what an ERC-721 token is and how to setup you NFTs metadata. ERC-721 NFT smart contract: thirdweb.com/thirdweb.eth/DropERC721 GitHub Repo: github.com/thirdweb-example/youtube-nft-claim thirdweb API: thirdweb.com/dashboard/settingsa Creating an AP...
How to add Coinbase Smart Wallet - Connect Wallet Button
zhlédnutí 2KPřed měsícem
In this video learn how to implement Coinbase's Smart Wallets into your web3 app. Coinbase Smart Wallet allows users to use passkeys to connect and confirm transactions. We'll learn how to implement this with thirdweb's ConnectButton in just a few lines of code. Coinbase Smart Wallet Changelog: blog.thirdweb.com/changelog/coinbase-smart-wallet-in-connect/ thirdweb API: thirdweb.com/dashboard/se...
Multi-chain Account Abstraction - Same Smart Wallet address across chains
zhlédnutí 763Před měsícem
In this video learn how to implement multi-chain account abstraction into your web3 app. Multi-chain account abstraction means that you can have the same smart wallet address across all-chains. Normally a smart wallet is deployed to the chain of use, but with deterministic deployment you can deploy the same smart wallet address across all chains. The best part is you can do this easily in a few...
How to Build an AI NFT Generator - OpenAI DALL-E and Engine
zhlédnutí 1,4KPřed měsícem
In this video learn how to build an AI NFT generator using OpenAI's DALL-E and thirdweb's Engine. Generate and automatically mint the generated image as an NFT to the connected wallet. ERC-721 NFT smart contract: thirdweb.com/thirdweb.eth/TokenERC721 GitHub Repo: github.com/thirdweb-example/youtube-ai-nft-generator thirdweb API: thirdweb.com/dashboard/settingsa Creating an API: czcams.com/video...
How to Build an NFT Fiat Checkout with Stripe - Buy NFT with Credit Card
zhlédnutí 1,3KPřed měsícem
In this video learn how to build an NFT credit card checkout. This will allow a user to pay using Stripe and using Stripe's webhooks, we can mint the user an NFT when we see the payment was successful. ERC-721 NFT smart contract: thirdweb.com/thirdweb.eth/TokenERC721 GitHub Repo: github.com/thirdweb-example/engine-nft-checkout thirdweb API: thirdweb.com/dashboard/settingsa Creating an API: czca...
How to Build an NFT Staking App - Stake ERC-721 and Earn ERC-20
zhlédnutí 1,8KPřed měsícem
In this video learn how to build an ERC-721 staking app, where a user can stake an ERC-721 NFT and earn ERC-20 tokens as a reward in return. We'll cover everything from deploying all the smart contracts you need to building a frontend to interact with your contracts using thirdweb's Connect SDK. ERC-721 NFT smart contract: thirdweb.com/thirdweb.eth/DropERC721 ERC-20 Token smart contract: thirdw...
Web3 Buy Me A Coffee - How to web3 developer tutorial
zhlédnutí 1,5KPřed měsícem
Web3 Buy Me A Coffee - How to web3 developer tutorial
How to Build a Web3 Accountability App
zhlédnutí 1,5KPřed 2 měsíci
How to Build a Web3 Accountability App
How to Build an ERC-20 Staking App - Stake Tokens and Earn
zhlédnutí 2,4KPřed 2 měsíci
How to Build an ERC-20 Staking App - Stake Tokens and Earn
Build Faster and Cheaper Web3 Apps on Layer 2 - Optimism, Base, Polygon and More
zhlédnutí 1,3KPřed 2 měsíci
Build Faster and Cheaper Web3 Apps on Layer 2 - Optimism, Base, Polygon and More
Build the Best Web3 Onboarding - Connect, Create, and Fund Wallets
zhlédnutí 1,7KPřed 2 měsíci
Build the Best Web3 Onboarding - Connect, Create, and Fund Wallets
How to build a Farcaster Transaction Frame
zhlédnutí 2KPřed 2 měsíci
How to build a Farcaster Transaction Frame
Become a Web3 Developer: Build Your First Blockchain App (Smart Contracts and Frontend)
zhlédnutí 6KPřed 2 měsíci
Become a Web3 Developer: Build Your First Blockchain App (Smart Contracts and Frontend)
Web3 Game Developer in 2024 Roadmap: Unity, Smart Contracts, Connect a Wallet [Full Course]
zhlédnutí 5KPřed 2 měsíci
Web3 Game Developer in 2024 Roadmap: Unity, Smart Contracts, Connect a Wallet [Full Course]
Best Web3 SDK is now 10x faster: Web3 Developers build blockchain apps faster
zhlédnutí 2,8KPřed 3 měsíci
Best Web3 SDK is now 10x faster: Web3 Developers build blockchain apps faster
Web3 Development SDK - Frontend, Backend, and Onchain
zhlédnutí 2KPřed 3 měsíci
Web3 Development SDK - Frontend, Backend, and Onchain
How to build a web3 game: Blockchain idle browser
zhlédnutí 6KPřed 3 měsíci
How to build a web3 game: Blockchain idle browser
How to deploy a rollup Caldera - Deploy smart contracts and build web3 apps on an Appchain
zhlédnutí 717Před 3 měsíci
How to deploy a rollup Caldera - Deploy smart contracts and build web3 apps on an Appchain
How deploy a L3 rollup with Conduit - Deploy smart contracts and build app with thirdweb
zhlédnutí 990Před 3 měsíci
How deploy a L3 rollup with Conduit - Deploy smart contracts and build app with thirdweb
How to use smart contracts with Unity - Web3 game developer
zhlédnutí 1,6KPřed 4 měsíci
How to use smart contracts with Unity - Web3 game developer
How to Build a Decentralized Exchange (DEX) - Web3 Developer Tutorial
zhlédnutí 7KPřed 4 měsíci
How to Build a Decentralized Exchange (DEX) - Web3 Developer Tutorial
That's gold!
thanks sean
Thank you thirdweb for making web3 development great again, can't wait to watch the RN/Expo tutorial 🔥
Wow! Thank You Sean. Your tutorials are the best in Web3 space
When adding WalletConnect Prefab to the scene: Unable to load the icon: 'winbtn_win_max'. Note that either full project path should be used (with extension) or just the icon name if the icon is located in the following location: 'Assets/Editor Default Resources/Icons/' (without extension, since png is assumed) UnityEditor.EditorGUIUtility:IconContent (string) RotaryHeart.Lib.SerializableDictionary.ReorderableList/Style:.cctor () (at Assets/Thirdweb/Core/Plugins/Rotary Heart/SerializableDictionaryLite/ReorderableList/ReorderableList.cs:1538) RotaryHeart.Lib.SerializableDictionary.ReorderableList:DrawHeader (UnityEngine.Rect,UnityEngine.GUIContent) (at Assets/Thirdweb/Core/Plugins/Rotary Heart/SerializableDictionaryLite/ReorderableList/ReorderableList.cs:443) RotaryHeart.Lib.SerializableDictionary.ReorderableList:DoList (UnityEngine.Rect,UnityEngine.GUIContent,bool,int) (at Assets/Thirdweb/Core/Plugins/Rotary Heart/SerializableDictionaryLite/ReorderableList/ReorderableList.cs:286) RotaryHeart.Lib.SerializableDictionary.DictionaryPropertyDrawer:OnGUI (UnityEngine.Rect,UnityEditor.SerializedProperty,UnityEngine.GUIContent) (at Assets/Thirdweb/Core/Plugins/Rotary Heart/SerializableDictionaryLite/Editor/DictionaryPropertyDrawer.cs:350)
Unable to load the icon: 'winbtn_win_max' when you add connect prefab!
I am working on a project which is based on only react files and there ConnectButton is not working ... what's the issue ?
Please open a support ticket here and provide details like the repo you’re working on and the issue you are running into: thirdweb.com/support
Hi Sean, I need to build a swap for our website.. can we work together? please lmk! Best regards!
can you have more than one claim condition running simultaneously? Say if I want to allow a public mint with the price of X per mint but want to offer a 50% discount if they pay with a custom ERC20 token can I create two public claim conditions with two different tokens and prices at the same time?
You can't have 2 claim conditions running at once. But you can accomplish something similar to what you mentioned using "Public (With Allowlist)" where you can provide the price and currency to override the public claim. But you would also have to specify the wallets that can do this, not anyone with the custom token can claim for the price. Hopefully this made sense.
@@thirdweb_ Hmm yes it makes sense but what I'm hearing is its not possible to do without an allow list. Meaning I would have to know ahead of time who is buying. There is nothing preventing me from swapping out claim conditions indefinitely though right? So I could do something like every Saturday you can use a custom token at a 50% discount and then just manually switch out the active claim conditions accordingly?
Great Tutorial. Thanks Sean.
Glad you liked it!
13:39 could we get a guide on adding a custom auth? I wanted to add an option for farcaster with Unity but i’m unsure of the best way to go about it
Custom auth is a video on our list ✅
While testing my app. I’ve used two different emails but I’m unable to delete them from my in app wallet allocations. Is there anyway to remove them
Are you talking about viewing all your wallets in ews.thirdweb.com/wallet
@@thirdweb_ not just viewing, but to remove some wallets
Another great video! Thank you sean
Glad you enjoyed it ❤️
event.args.sender and timestamp - property names are underlined red with "Property 'sender' does not exist on type 'readonly unknown[] | Record<string, unknown>'." it's running ok, but wanted to ask anyway if and how to resolve this? TY!
Thank you Sean! Running with this now
Glad you enjoyed! Let us know how it turns out 👍
More on react native mobile apps will be appreciated
We are working on some 🫡
Emailed 3rdweb for custom plan info 3days ago and.... (crickets)
Apologies that there hasn’t been a response yet. Just want to double check. Did you contact through this: thirdweb.com/contact-us Or was it another contact form?
@@thirdweb_ Form filled out and submitted, ThankYou. Last one did not look exactly like current Form fyi.
What are you waffling about fu.
I get a Cors error and nft metadata image wont load. The correct uri is in the console
I keep getting a Cors error and the metadata wont load. It shows the correct file patch in the console
Good tutorial!
the media Renderer isnt being imported because its not a module by Thirdweb is the error im getting. im in confusion
Hi Sean , Thanks for the update - it is straight forward and a great helpfor my project. I will be creating a MVP and getting in touch with you/team for elevating to the nex level. Thank you!
Glad it was helpful! Stay tuned for more videos being released in this playlist!
Hello, Im full stack developer. Is the information in this video enough for a client to build an NFT website ?
Hey Sawn, firstly thanks for all the videos you are making - couldnt learn this stuff without them. Secondly : why not make the image into an svg and mint it directly on chain? That could be a great addition to this tutorial.
neynar is unfree
No one can solve this. Not even in ThirdWeb. ./components/NFTCard.tsx:109:21 Type error: Object literal may only specify known properties, and 'to' does not exist in type 'BaseTransactionOptions<ApproveParams>
I saw in the net that Third WEb contract been compromised is that true?
Support mobile webGL?
Npx command is not working on my win7 laptop pls help me
plz, Can you share the repo for this example?
Sean, GM, how do we use the injected provider. Please make a video for this or i feel it should have been added to this video since its related to the video.
There will be a video that goes into this, where we cover how to use the wallet that is connected, auto connecting, switching chains and accounts. This video is more of a "getting started" for the ConnectButton component. You can checkout some of the hooks here for now for dealing with wallet connect: portal.thirdweb.com/references/typescript/v5/useActiveWallet
@@thirdweb_ Thank you, I hope this is Sean. Really love the contents you put out. Thirdweb sis doing a great job by the way.
Is there a way to sign a transaction without letting metamask popup? Something like a timeout function
Do you mean pre-signing a transaction through a popup and then not having to after? or fully just not having to sign a transaction?
@@thirdweb_ fully having to sign programmatically... And also if I saw "signTransaction" "serializableTransaction" on thirdweb. Could they be what I am looking for?
@@thirdweb_ but if you already have a video on presigning too I'd be glad to have that, but now my main focus is to be able to execute a smart contract function, with maybe my private keys , simply not needing any wallet. I am actually executing based on time. I actually tried to execute with a setTimeout and it works by popping up metamask automatically which I don't want
@@thirdweb_ not having to use metamask to sign
I see. You can use something like "signTransaction". Just make sure you are securely storing your private key if doing it this way. portal.thirdweb.com/references/typescript/v5/signTransaction Or you could implement account abstraction and Engine to provide session key access for a backend wallet on Engine to do the signing for the user, instead of them doing the signing. If you need more details and support you can open a support ticket here: thirdweb.com/support
I'm planning to build my mobile dApps but, I only have option with WalletConnect, will be there a React Native version of this video?
Yes we have some React Native videos in the works with the new SDK version 👍
17:35, "You don't have any funds on this network. You'll need some MATIC to pay for gas. You can get some from the faucet below." please help me resolve this issue
In components NFTCard, line 110: Object literal may only specify known properties, and 'to' does not exist in type 'BaseTransactionOptions<ApproveParams>'.ts(2353), how to solve "to" error?
Is it then accurate to call an ERC-1155 a SFT? Is it also still accurate to call them NFTs?
const ownedNFTs = useReadContract(getOwnedNFTs, { contract: NFT_CONTRACT,owner:account?.address || "",}); I have replaced the method for obtaining the ownedNFTs, but I am unable to retrieve the data. How should I modify it?
still don't get it why would you kill withpaper service, nft checkout UX was so much better
bro you did really well .. after struggling to 50 + videos . finally got everything ..in next projects use tailwind css with vite .. make one video on that its request
May I suggest an idea for a video on the Thirdweb CZcams channel? Create a tutorial video on how to lock tokens or NFTs for a period of 12, 24, or 36 months. 🔒 Develop a lock app that will help users understand how to implement this feature. Thank you.
How can I do what you do in this video? czcams.com/video/lpBdrkjR2eQ/video.htmlsi=hpoGRegVgl0ZlkaR Because I have not been able to do it, since I see many outdated libraries and documentation or some obsolete elements or instructions and when I try to put the code, it always reflects errors in the library address, since there is very little information on the subject, I cannot solve it and still I haven't been able to with Thirdweb's AI, because it gives me wrong answers, it asks me to verify some instructions and I don't know where to see it, because I have searched the page and it gives me data such as to change `walletSelectorButtonBgHover: "#eeeeee", ` and the message I get is "Object literal may only specify known properties, and 'walletSelectorButtonBgHover' does not exist in type 'Partial<{ primaryText: string; secondaryText: string; accentText: string; danger: string; success: string; modalOverlayBg : string; accentButtonBg: string; accentButtonText: string; primaryButtonBg: string; (property) walletSelectorButtonBgHover: string", however, when I change it and check the documentation, it tells me that it is fine, but it does not change, it is not applied and so there are many errors that do not allow me to do anything from any of your tutorials and I I have solved it on my own, but I would like to have better information on hand that allows me to execute it correctly without those errors and for it to work. If you do it in various videos to teach how to solve all these issues and update some of your videos, thank you very much. I would like you to update to make contracts, to make a SWAP module, like a SwapApp, among other videos that you have, but that have not helped me to do so.
Hi, what's the link to the video/guide mentioned in the video about storing Private Keys' best practice?
Wow you activated a rainbow in the suscribe button in the exact second where you click on suscribe in the video?
that's great
thanks works successfully best video ever
How do I get Test Eth from Faucet for Sepolia so I can deploy? I click link on third web and it said site host is not set up.
hey i'm not able to create a payment link on the mainnet. It says that i have to be verified by KYC and KBC how can i resolve?
Correct, in order to use checkout on mainnet you must verify you and your business. If you need more support you can open a support ticket here: thirdweb.com/support
Any chance you will be doing a dao tutorial anytime?
We can add this idea to our list of potential videos ✅
@@thirdweb_ awesome great work on the vids love how you break them up into smaller sections
Does this platform deploy all contracts
You can use our CLI to deploy any contract created using our dashboard: portal.thirdweb.com/contracts/deploy/overview