- Видео 21
- Просмотров 266 057
Code Bushi
США
Добавлен 30 июн 2019
Web Development Tips and Resources to Elevate Your Coding Yourney.
Farcaster Transaction Frames - Local Debugging + Mint NFT
Learn how to create a Transaction Frame that will mint an ERC-1155 NFT directly from your Warpcast feed.
We'll use Frog.fm to create our Farcaster frame and also Ngrok to hook up our local dev server to the official Warpcast Frame Validator. The NFT smart contract is deployed on the Base Sepolia testnet so we can test it without using real funds.
Since Frog.fm is built on top of Viem, we can use the familiar API to connect and interact with our NFT smart contracts. We'll import the ABI and supply the necessary arguments in order to trigger the claim function on our smart contract.
We also hook up a Farcaster Hub so that our Transaction Frame is verified and secured.
GitHub Repo:
github.com/Cha...
We'll use Frog.fm to create our Farcaster frame and also Ngrok to hook up our local dev server to the official Warpcast Frame Validator. The NFT smart contract is deployed on the Base Sepolia testnet so we can test it without using real funds.
Since Frog.fm is built on top of Viem, we can use the familiar API to connect and interact with our NFT smart contracts. We'll import the ABI and supply the necessary arguments in order to trigger the claim function on our smart contract.
We also hook up a Farcaster Hub so that our Transaction Frame is verified and secured.
GitHub Repo:
github.com/Cha...
Просмотров: 942
Видео
Secure Farcaster Frames - Get Verified FID & User Data
Просмотров 1,1 тыс.9 месяцев назад
In order to get secure and verified Frame Data from Farcaster, we need to hook up a Farcaster Hub. In this example, we'll use the free Hub from Pinata to verify the Frame Signature and get the user's Farcaster ID. We'll use Frog.fm to construct our frame and spin up a local host server. In order to test our frame validation, we use Ngrok to expose our local server to the internet. This way, we ...
Wagmi Hooks v2 + Next.js App Router - Cookie Storage
Просмотров 1,6 тыс.10 месяцев назад
The latest version of Wagmi Hooks (2.5.12) and Next.js (14.1.4). We'll explore some of the common errors that may occur when working with the Next.js App Router and how to tackle the various server side rendering issues. Finally, we'll enable cookie storage with Wagmi Hooks so that our connected accounts data will continue to persist on Next.js server components. 00:00 - Project Setup 01:39 - I...
Frog.fm Tutorial - Easy Framework For Farcaster Frames
Просмотров 2,9 тыс.10 месяцев назад
Building a Farcaster Frame using the new framework called Frog.fm. The frame we'll be building is a meme generator, and we'll explore how Frog.fm reduces a lot of code when making frames. We'll also talk about how to add a Farcaster Hub to your frame and how it's better to use the secure frameData when collecting user information. New to Farcaster Frames? Start here! ruclips.net/video/g_pkATT8p...
Farcaster Frames Beginner's Guide - Next.js & Local Testing
Просмотров 4,4 тыс.10 месяцев назад
We take a look at what Farcaster frames are and how they work in the Warpcast social media app. We'll first compare an open graph meta tag to a farcaster frame meta tag and see how they are related. Using Next.js, we'll build the backend api for our frame and use local dev tools to test our frame's look and functionality. Once we publish our website to Vercel, we can generate open graph images ...
Filtering with React Server Components, URL Search Params, Server Actions
Просмотров 6 тыс.Год назад
Traditionally, when you wanted to filter your data using React, you would first store the original data in local state, with the `useState` hook. There would be a `useEffect` that watches for any filter changes, and then you would re-fetch the data using the applied filters on the client. Once you get back the filtered data, you update the `useState` and the list re-renders, showing only the fi...
Validate Form Data Checkboxes and Radio Groups
Просмотров 1,9 тыс.Год назад
When trying to submit a HTML form using Next.js Server Actions, the data that goes to the server function is a FormData object. Working with a traditional text input is pretty straightforward, you can simply get the text string off of the input's value attribute. Checkboxes can be a bit different, because most backends and database schemas will prefer a boolean value. We'll explore what the che...
Next.js Server Actions Inside React Client Components
Просмотров 4,7 тыс.Год назад
Today we'll do a quick exploration of Next.js Server Actions and how you can mix them into React Client Side Components. We start with a sample app built on top of Next.js 13, the new App Router, and Supabase. We'll submit a form and process the database update via Server Actions and then provide a response back to the Client Component. The client component can then show some feedback to the us...
Build a Link in Bio Website that swipes like TikTok and Reels
Просмотров 702Год назад
I recently updated my personal website, hunterchang.com, and wanted to share how I did it. The idea was to make a link in bio type of site, but style it to look and feel like TikTok or Instagram Reels. I added full-screen video backgrounds and have my social media icons clearly visible. The main slider library I used was swiperjs.com Key Takeaways: 1:28 - The site is just mainly 1 HTML page, wi...
Next.js App Router Dynamic Sitemap & SEO Metadata
Просмотров 6 тыс.Год назад
Let's add a dynamic sitemap.xml file to our Next.js blog, built using the new Next.js App Router. We'll also add some helpful metadata tags including the canonical url tag, the Open Graph protocol og tags, and twitter cards. Key Takeaways: 1:02 - A sitemap.xml file is essential to any website's SEO. It signals to search engines, like Google, that your site and pages exist. 3:34 - You can create...
Getting Better At CSS - 5 Tips and Examples
Просмотров 1492 года назад
This is a video about my thoughts on CSS and why it's hard for web developers to master. I've included 5 tips on how you can improve your CSS skills and some practical examples. Please let me know in the comments if there is a particular tip or topic that needs a better explanation. What do you think of this style of video? It's not something I normally do, as it's less about code and more abou...
Next.js Ethereum Starter
Просмотров 4202 года назад
Hey Everyone! Sorry for the long hiatus, I know I have not been very active in posting in this channel. This video is a quick demo I did for the buidlguidl.com, which is a group of developers who build on Ethereum. My interests have shifted to Web3 and Ethereum development over the past few years, so if you would like to see more content related to that, let me know in the comments! In this vid...
Next.js Server Side Rendering and getInitialProps
Просмотров 14 тыс.4 года назад
We take a look at the power of Next.js and how it handles fetching data using getInitialProps. We also cover some of the gotchas when working with server side rendering since the code runs on both the Node server as well as the Client/Browser. 4:35 - Pages without the getInitialProps function will be considered by Next.js as a Static Page. If all of your pages are static, you can essentially us...
JavaScript Local Storage Introduction
Просмотров 1,3 тыс.5 лет назад
Introduction on how to use JavaScript's window.localStorage by creating a Dark Theme for a simple site. We take a look at how to setItem and getItem from Local Storage. Key Takeaways: 6:42 - localStorage.setItem() takes two arguments, the first is the Key and the second is the Value. Both Key and Value must be a string. You can see these stored values in the browser's dev tools, under the Appli...
Fetch API & Rendering Data with JavaScript
Просмотров 123 тыс.5 лет назад
In this video, we take a look at the browser's built in Fetch API to get some dummy data. We then map over that dummy data to create some HTML with Vanilla JavaScript and render it onto the screen. Key Takeaways From The Video: 3:20 - The Fetch API returns a Promise, so you need to wait for the promise to resolve by using .then() after it. 4:16 - The Fetch API initially return a Response object...
React.memo, useMemo, and useCallback Optimizations
Просмотров 45 тыс.5 лет назад
React.memo, useMemo, and useCallback Optimizations
Gatsby.js with Tailwind CSS and PurgeCSS
Просмотров 8 тыс.5 лет назад
Gatsby.js with Tailwind CSS and PurgeCSS
Gatsby.js Global State with React Context and useReducer Hooks
Просмотров 11 тыс.5 лет назад
Gatsby.js Global State with React Context and useReducer Hooks
Fetching Dynamic Data with Gatsby.js
Просмотров 24 тыс.5 лет назад
Fetching Dynamic Data with Gatsby.js
Hello, thanks for the video, I'm getting this error in console: [StorageManagerWeb: getPersistedChannelConfig()] Can't find existing channel config ReferenceError: localStorage is not defined at Generator.next (<anonymous>) at new Promise (<anonymous>) at Generator.next (<anonymous>) at new Promise (<anonymous>) at Generator.next (<anonymous>) at new Promise (<anonymous>) at Generator.next (<anonymous>) [StorageManagerWeb: getPersistedChannelConfig()] Can't find existing channel config ReferenceError: localStorage is not defined ... Do you know how to fix it, please? I tried a lot with no success unfortunately.
Thanks for the video. At the 6:15 step I get a "Loading ENS name" hanging for a while and then the error "Error fetching ENS name: The contract function "reverse" reverted with the following reason: Internal error Contract Call". My address is correct and my metamask is setup to run on mainnet and sepolia so not sure what is going on.
How to deploy? 😥😥
Thanks man, really helpful. I found this section of the frog docs quite confusing so this really helped
Glad it helped!
so is it better to develop any Ethereum Dapps using React instead of nextjs?
Hello Thankyou for your amazing videos I have a problem with frames I cann't change frame size! I change anything about size but just my background changed but frame didn't change How i can do it?
for some reason when I follow this I get the framedata but verified returns false at 7:05
does this need a subscription like neynar or is this free to do?
fascinating. First step, step back.
Thank you so much
hi sir a questions? im new in this and im trying to make my first frame onchain i follow your video and github, but i have a trouble when i try to do a test with my wallet, so the question is how do u get your args? because i put in the funtion the address, quantity, cureency etc... so i think that my error is in this part of code but i cant find the way lol so could u tell me ? do u get the args on thirdweb? thanks mate cheerss!
Yes you can get those from thirdweb. In the video, I went to the thirdweb "Explorer" and looked for the `claim` function. When you find the function, there will be these input boxes which are actually the arguments that function expects. You can actually run the `claim` function directly in thirdweb, after filling out all the input boxes. When your wallet pops up, you can view the bytecode and see what arguments are being passed before you sign the transaction.
where did you get the new route.tsx file to add to the images folder from? trying to recreate this and it seems like i'm missing a step
Hey great question. I created it before recording, the file is based off of: nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
Thanks. This helped a lot.
Glad it was helpful!
the frame works in the warpcast frame validator when I use ngrok but when I deploy with vercel I get an error - validateFrameEmbed 400 - Missing image URL. I can't figure out how to fix it?
Hey man. I'm learning to use frog to build frames. I'm trying to build an allowance tracking frame and can't figure out which line of coding I need to use to be able to pull the data from the API... any suggestions? Couldn't find it on their website
use airstack api queries
Thank you, that was very helpful. However, I encountered an issue. Everything appears normal in the official Validator, but after I published a post, the preview image became a small thumbnail (it’s a link with a left-right structure). I dont kown what happend. (哭泣
How do I publish it to Farcaster? Do I just copy the link?
You can just paste the url into Farcaster and it will read it as a frame when you cast it
Very useful!! Thanks so much bro!!
Hi, I want to display an apostrophe (Let's Go) in a <Button> from Frog but it is encoded and it shows Let's Go. Any tips?
there is a tutorial to create a frame like paragraph to share links from a website???
Followed this exactly, but am receiving an error when testing on the warpcast validator: validateFrameEmbed 400 - Frame image error: Invalid ContentType: ''.
Amazing content about farcaster framescdevelopment , thank you ! Possible to create a playlist regrouping all your farcaster videos ?
I understand when we submit form data and server calls action and gives response. But this example with usecallback is confusing - we create callback on client and call it on a server.
Whats terminal u use ?
I use Warp terminal
Thank you! It is very helpful for me and right in time
I get Frame image error: Invalid ContentType: 'text/html'. on my second frame but the first one on /api is working fine (deployed to vercel, everything works on local but not on warpcast frame debugger)
i love your pace and everything about this video, well done!
Thank you so much!
hm i copy paste `basic` frame without email input, just gallery of pictures and have `validateFrameEmbed 400 - Missing image URL` error in warpcast frame validator 🤔
Was useful, thanks! Will have a test tomorrow :)
Hi , only free mints can be done using this code or we can only mints which is not free?
You can do paid mints too! You'll just need to include a value to c.contract
great video, please can you make like more basic tutorial, like a frame for checking the price of a crypto token?
Great video, but github with the code would be a big help
I am just confused, I figure this out myself, but then if I want to use and call smart contract functions, I need to use "use client" always on the hooks like readContract and Write to Contract, isn't that unsafe and could a user do malicious stuff to the smart contract since is in the client? Could you explain or I am having everything wrong ahahah. Thanks and great vid!
You are correct in that operations in the client could be considered unsafe, so if you have secret API keys you never want to expose them in the client/browser. However, smart contracts and all of their functions are already public, on the public blockchain. Anyone can already interact with them, so it is fine to interact with them in the client. You can actually interact with smart contracts on the server, using viem instead of wagmi hooks. The wagmi hooks are just a layer built on top of viem. However, if you are using a wallet extension and need to sign a transaction, then you pretty much have to use the client. This is because that is where the wallet lives and the signing happens. Hope that makes sense, this was a great question!
@@codebushi Okey, thanks for the explantion helped a lot, keep it up👍
Heyy, great video. I encounter a problem where init my project via next.js, but when i connect my ngrok url to warpcast. it return "validateFrameEmbed 400 - Frame image error: Invalid ContentType: ''." any work around this issues?
Did you try visiting the ngrok url in a browser first? It should show a splash screen and you can click visit site. Not sure if that is the issue, though.
Thanks
Hey. Thank you for your quality contents! Can you make a tutorial about deploying to CloudFlare Workers? I can easily deploy things on vercel with the CLI, but the CF Workers CLI(Wrangler) does not deploy as intended. I guess the problem is that it adds some random characters to the static file names while it deploys the static files on its KV Database and therefore the frame cannot be rendered since the images are not accessible to the code because of the wrong name.
I have not tried CloudFlare Workers before, but it's something I plan to look into. I will give it a try and let you know how it turns out! In the meantime, Frog is using Hono and there might be some Hono guides for CloudFlare Workers you could try out. hono.dev/getting-started/cloudflare-workers Might have some missing steps that Frog doesn't mention.
NOTE: You DON'T actually need to have a hub hooked up for transaction frames, so you could skip the pinata hub and ngrok steps. However, this does help make everything more secure if you need any other data from the user when they interact with your transaction frame.
hey by any chance can you make a tutorial on composer actions on frames
very well explained thanks!!
Glad it was helpful!
Thank u so much 🙏 Exactly what I was looking for as a coding beginner! Will see what I can build over the next few days and already followed u on warpcaster so maybe I'll ask one or the other question there instead of using the RUclips comment box ;)
Thank you! Please let me know if you would like a video on anything else you're exploring!
Great video thank you! Works really good on desktop, however on mobile i get "Unable to load. Failed to load transaction data from frame server", do you experience that too or have any idea what the issue could be? Anyway, thanks again for the content!
Hmm I didn't get that error. I've deployed the code from the repo and it works on mobile for me: warpcast.com/hunterchang/0x939ab8e7 Did you alter anything from the Github Repo?
@@codebushi A friend of mine could mint of my frame. I tried your frame, but it didn't work for me either. Gonna have to find out what's wrong with my warpcast/phone. Thanks anyways.
Brother NFTs are not a thing anymore
Do you have Coinbase Wallet installed? It's possible that is needed on mobile, per the transaction frame spec.
great tutorial! Just what I needed
Glad you liked it!
love you bro , thanks
tq, so much waiting for to release on farcaster frame actions video
Hi, im seeing this error on the terminal, do you know what can be happening? ] { library: 'SSL routines', reason: 'wrong version number', code: 'ERR_SSL_WRONG_VERSION_NUMBER' }
Hmm not sure, you can try to update Frog to the latest version?
Dude! I'm so lucky to have found your video! I was in a hole trying to figure out this configuration. Thank You 🙏🏾🙏🏾
Glad I could help!
great video , when we gonna get a video about getting users data such as profile picture or uid ?
Making this video now!
Video is up! ruclips.net/video/6mwVHkF4oXg/видео.html
Amazing video.. I was looking for something to test locally.. Thanks @codebushi
Glad it was helpful!
Great work Bushi. This video helped me a lot
Glad it helped!
Do I need a farcaster account if I want to build something with farcaster?
Technically no, you do not need a Farcaster account. You can build and test it all locally and deploy it. However if you want to use the final product live, you'll want a Farcaster account.
@@codebushi that's awesome, can you share some guides or resources?
Great video 🎉
Thank you!