title
Build Coinbase Blockchain Web 3.0 App with Next.js | Sanity.io | thirdweb

description
In this tutorial, you're gonna be building the Coinbase Blockchain Web 3.0 App using Next JS, Sanity.io, thirdweb, Styled Components, and Vercel 🔥 Get early access to thirdweb 👉 https://thirdweb.com/start?utm_source=youtube&utm_medium=social&utm_campaign=clever+programmer&utm_term=web3clones Get the free boosted plan with Sanity 👉 https://www.sanity.io/cleverprogrammer 🗄️ Link to the assets: https://drive.google.com/drive/folders/1K2F71CTBYIlF4zMw9EMz5P231TQ80_x1 🔗 GitHub Repo: https://github.com/drakosi99/coinbase-clone You'll be learning about: 👉 Building a Web 3.0 Application with Next JS 👉 Styling your app using Styled Components 👉 Create and mint your own Cryptocurrency Tokens using the thirdweb SDK 👉 Adding Web 3.0 authentication using Metamask 👉 Storing data and information about the tokens you created in Sanity.io 👉 Using GROQ to retrieve data from Sanity Studio and display it in your Web 3.0 App 👉 Creating a send and receive functionality for your tokens on the blockchain 👉 Deploy and host the app on Vercel Buckle up, buttercup 🚀 ⏲️ Timestamps 00:00:00 - Intro 00:00:58- Demo 00:04:30 - Setup Project 00:29:01 - Login with Metamask 00:40:17 - Add Heaeder 00:48:26 - Add Portfolio Component 01:09:08 - Add Sidebar 01:20:21 - Add Connected Wallet Component 01:24:50 - Finish Sidebar Style 01:26:57 - Build Side Promo Element 01:31:19 - Add Chart & Balance 01:39:47 - Calculate Total Balance & Query Sanity Database 02:19:04 - Add Modal 02:32:58 - Modal Routing & Transfer Crypto 03:17:40 - Switch Tokens 03:43:08 - Other Pages in the Modal 04:04:01 - Closing Remarks ======================================================= 👨👩👧👦 Join our Discord Community: https://cleverprogrammer.com/discord 🚀 Join Profit with React: https://www.cleverprogrammer.com/pwr?utm_source=youtube&utm_medium=yt-description&utm_campaign=yt-build&utm_content=22-jan-coinbase-web3-clone 🤝 Attend our meetups: https://www.cleverprogrammer.com/meetups #web3 #frontend #blockchaindeveloper Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': 'Build Coinbase Blockchain Web 3.0 App with Next.js | Sanity.io | thirdweb', 'heatmap': [{'end': 1220.664, 'start': 914.03, 'weight': 0.905}, {'end': 5801.598, 'start': 5638.179, 'weight': 0.756}, {'end': 6715.701, 'start': 6555.327, 'weight': 0.786}], 'summary': 'Learn how to build a coinbase blockchain web 3.0 app with next.js, integrating web 3.0 authentication with metamask, utilizing sanity.io for token storage, deploying with vercel, and setting up a sanity backend with 200,000 api requests, 1 million api cdn requests, and 20gb bandwidth, while also creating custom cryptocurrencies, setting up front-end, tokens for solana, bitcoin, and ethereum, and building dashboard ui, portfolio components, wallet, and integrating apis.', 'chapters': [{'end': 184.515, 'segs': [{'end': 98.642, 'src': 'embed', 'start': 63.51, 'weight': 0, 'content': [{'end': 67.614, 'text': "With all of that said, let's just get right into it and demo the app right now.", 'start': 63.51, 'duration': 4.104}, {'end': 69.176, 'text': "So here's my app.", 'start': 67.674, 'duration': 1.502}, {'end': 70.757, 'text': "Now notice that I can't log in.", 'start': 69.236, 'duration': 1.521}, {'end': 72.399, 'text': 'I have to actually connect my wallet.', 'start': 70.837, 'duration': 1.562}, {'end': 76.243, 'text': 'Boom, I click that, my MetaMask pops up and I will hit next and connect.', 'start': 72.439, 'duration': 3.804}, {'end': 77.444, 'text': 'Once the connection is done,', 'start': 76.383, 'duration': 1.061}, {'end': 86.653, 'text': "you'll see that my app automatically opens up and retrieves all of my tokens and coins from my MetaMask or my Sanity database that I have.", 'start': 77.444, 'duration': 9.209}, {'end': 95.259, 'text': "But if you look here, it's pulling my four Bitcoin and my two Ethereum, and it's actually telling you exactly what my portfolio balance is.", 'start': 86.693, 'duration': 8.566}, {'end': 98.642, 'text': "Now, let's say I were to sell off one of my Bitcoins.", 'start': 95.559, 'duration': 3.083}], 'summary': 'App demo showcases automatic retrieval of 4 bitcoins and 2 ethereums from metamask, displaying portfolio balance.', 'duration': 35.132, 'max_score': 63.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks63510.jpg'}], 'start': 0.069, 'title': 'Building coinbase blockchain web 3.0 app', 'summary': 'Covers building a coinbase blockchain web 3.0 app with next.js, using styled components, creating and minting tokens with third web sdk, integrating web 3.0 authentication with metamask, utilizing sanity.io as the database for token storage, and deploying the app using vercel.', 'chapters': [{'end': 57.868, 'start': 0.069, 'title': 'Building coinbase blockchain web 3.0 app', 'summary': 'Covers building a coinbase blockchain web 3.0 app with next.js, using styled components for styling, creating and minting tokens with the third web sdk, integrating web 3.0 authentication with metamask, utilizing sanity.io as the database for token storage and information, and deploying the app using vercel.', 'duration': 57.799, 'highlights': ['You will build a Coinbase blockchain Web 3.0 app with Next.js. This sets the foundational topic of the chapter.', 'Learning how to create and mint your very own tokens using the third web SDK. Quantifiable action-focused learning objective.', 'Utilizing Sanity.io as the database for token storage and information. Key point about the database usage.', 'Deploying the app using Vercel and hosting it on the internet. Quantifiable action of deploying the app and hosting it.', 'Adding Web 3.0 authentication, so users need to log in using MetaMask. Key point about the authentication process.']}, {'end': 184.515, 'start': 63.51, 'title': 'Blockchain app demo', 'summary': 'Demonstrates a blockchain app that connects to metamask and provides real-time updates of token balances, enabling the user to initiate and track transactions, resulting in a visible change in portfolio balance.', 'duration': 121.005, 'highlights': ["The app retrieves and displays the user's token balances from MetaMask, showing four Bitcoins and two Ethereums, and updates the portfolio balance in real-time.", 'Initiating a transaction of one Bitcoin results in a visible drop of $40,000 in the portfolio balance, demonstrating real-time updates.', 'The app tracks and displays the progress of the transaction, showing a successful transfer and an immediate update of the portfolio balance, dropping from $170,000 to $130,000.']}], 'duration': 184.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks69.jpg', 'highlights': ['Learning how to create and mint your very own tokens using the third web SDK. Quantifiable action-focused learning objective.', 'Deploying the app using Vercel and hosting it on the internet. Quantifiable action of deploying the app and hosting it.', 'Adding Web 3.0 authentication, so users need to log in using MetaMask. Key point about the authentication process.', 'Utilizing Sanity.io as the database for token storage and information. Key point about the database usage.', "The app retrieves and displays the user's token balances from MetaMask, showing four Bitcoins and two Ethereums, and updates the portfolio balance in real-time.", 'Initiating a transaction of one Bitcoin results in a visible drop of $40,000 in the portfolio balance, demonstrating real-time updates.', 'The app tracks and displays the progress of the transaction, showing a successful transfer and an immediate update of the portfolio balance, dropping from $170,000 to $130,000.', 'You will build a Coinbase blockchain Web 3.0 app with Next.js. This sets the foundational topic of the chapter.']}, {'end': 819.322, 'segs': [{'end': 479.999, 'src': 'embed', 'start': 451.668, 'weight': 3, 'content': [{'end': 454.59, 'text': 'Make sure you use that so you can just keep building as many projects as you want.', 'start': 451.668, 'duration': 2.922}, {'end': 457.671, 'text': "Now here, I'm gonna say Sanity init, just like this.", 'start': 454.67, 'duration': 3.001}, {'end': 459.632, 'text': "Okay, we're gonna create a new project.", 'start': 457.931, 'duration': 1.701}, {'end': 463.553, 'text': 'And what should we call this project, right? You can call it whatever you want.', 'start': 459.792, 'duration': 3.761}, {'end': 469.835, 'text': "I'm gonna call it Coinbase, you know, final or Coinbase blockchain app.", 'start': 463.833, 'duration': 6.002}, {'end': 470.795, 'text': "Let's call it that.", 'start': 469.955, 'duration': 0.84}, {'end': 475.937, 'text': "And then I'm gonna hit enter to just go through with the default settings that it shares with us.", 'start': 470.975, 'duration': 4.962}, {'end': 479.999, 'text': "Okay And then the project output path, let's just hit enter.", 'start': 476.337, 'duration': 3.662}], 'summary': "Demonstrating creating a project named 'coinbase blockchain app' using sanity init command.", 'duration': 28.331, 'max_score': 451.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks451668.jpg'}, {'end': 819.322, 'src': 'embed', 'start': 764.509, 'weight': 0, 'content': [{'end': 769.433, 'text': "dollars, or we can type in one eth to usd, and that's the conversion that we get.", 'start': 764.509, 'duration': 4.924}, {'end': 772.816, 'text': 'so we can just go ahead and add that in just like this.', 'start': 769.433, 'duration': 3.383}, {'end': 774.837, 'text': 'okay, i just like to kind of leave it like this.', 'start': 772.816, 'duration': 2.021}, {'end': 777.559, 'text': 'it makes it simpler and then just hit publish.', 'start': 774.837, 'duration': 2.722}, {'end': 783.824, 'text': "so this is one thing that we've just added to our database, and now i'm just going to add bitcoin, btc,", 'start': 777.559, 'duration': 6.265}, {'end': 788.328, 'text': "and for the price i'm just going to say that because i think that's what it is today.", 'start': 783.824, 'duration': 4.504}, {'end': 788.848, 'text': 'um all right.', 'start': 788.328, 'duration': 0.52}, {'end': 794.692, 'text': "so then we're going to scroll down and at the bottom we have uh, Go ahead and double check that.", 'start': 788.848, 'duration': 5.844}, {'end': 795.132, 'text': 'All right.', 'start': 794.892, 'duration': 0.24}, {'end': 798.933, 'text': "And then we see this green button right here, and I'm just going to hit publish on this.", 'start': 795.252, 'duration': 3.681}, {'end': 802.315, 'text': 'And then we can just like this, we can also add Solana.', 'start': 799.274, 'duration': 3.041}, {'end': 805.356, 'text': 'And then for this, the symbol is going to be soul.', 'start': 802.535, 'duration': 2.821}, {'end': 807.657, 'text': 'And for the price, we can actually look that up.', 'start': 805.536, 'duration': 2.121}, {'end': 810.598, 'text': 'So one Solana to USD is about $141.', 'start': 807.737, 'duration': 2.861}, {'end': 814.019, 'text': "So I'm just going to carry that over and pop that in right there.", 'start': 810.598, 'duration': 3.421}, {'end': 815.32, 'text': "And we're going to hit publish.", 'start': 814.3, 'duration': 1.02}, {'end': 817.841, 'text': "So there's just two pieces of information that we need.", 'start': 815.64, 'duration': 2.201}, {'end': 819.322, 'text': 'One is contract address.', 'start': 818.062, 'duration': 1.26}], 'summary': 'Adding eth, btc, and solana to database with prices: 1 eth to usd, btc at market price, and 1 solana to usd at $141.', 'duration': 54.813, 'max_score': 764.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks764509.jpg'}], 'start': 184.515, 'title': 'Building blockchain app, coin token schema, and sanity database setup', 'summary': 'Covers building a blockchain app using next.js with features like wallet connection, receiving bitcoin and ethereum, and setting up sanity backend with 200,000 api requests, 1 million api cdn requests, and 20 gigabytes of bandwidth. it also includes setting up a schema for a coin token in a sanity studio folder and the process of setting up a sanity database, highlighting its ease of use, scalability, and real-time updates.', 'chapters': [{'end': 470.795, 'start': 184.515, 'title': 'Building coinbase blockchain app', 'summary': 'Demonstrates the creation of a blockchain app using next.js, with features like wallet connection, receiving bitcoin and ethereum, and setting up sanity backend with 200,000 api requests, 1 million api cdn requests, and 20 gigabytes of bandwidth.', 'duration': 286.28, 'highlights': ["Creation of blockchain app using Next.js The app is built using Next.js, providing a beautiful tech stack and seamless functionality for wallet connection and asset management, resembling Coinbase's interface.", 'Functionality of receiving Bitcoin and Ethereum The app allows users to receive Bitcoin and Ethereum, generating a functional QR code that provides the exact wallet address for transactions.', 'Setting up Sanity backend with generous resources The process involves setting up Sanity as the backend and database, with a provided plan offering 200,000 API requests, 1 million API CDN requests, and 20 gigabytes of bandwidth for free.']}, {'end': 626.245, 'start': 470.975, 'title': 'Setting up schema for coin token', 'summary': 'Covers the process of setting up a schema for a coin token in a sanity studio folder, including defining fields such as name, symbol, contract address, usd price, and logo.', 'duration': 155.27, 'highlights': ['The installation process involves building the studio folder with the sanity files inside, and the schemas file is the crucial location for building and adding the schema.', 'The schema for the coin token includes defining fields such as name, symbol, contract address, USD price, and logo, with specific data types for each field such as string or image.']}, {'end': 819.322, 'start': 626.546, 'title': 'Setting up sanity database', 'summary': 'Illustrates the process of setting up a sanity database, highlighting its ease of use, scalability, and real-time updates, while also demonstrating the addition of data entries and the registration process for sanity.io.', 'duration': 192.776, 'highlights': ['Sanity is an easy-to-use and scalable database utilized by big companies like Figma and Sonos, endorsed by Nike, and allows real-time updates. Sanity database highlighted for its ease of use, scalability, and real-time updates, utilized by big companies like Figma and Sonos, endorsed by Nike.', 'Demonstration of adding data entries for coins such as Ethereum, Bitcoin, and Solana, including their symbols and prices. Demonstration of adding data entries for coins like Ethereum, Bitcoin, and Solana, including their symbols and prices.', 'Registration process for Sanity.io involves creating an account using Google, GitHub, or Email, with a free plan available for usage. The registration process for Sanity.io involves creating an account using Google, GitHub, or Email, with a free plan available for usage.']}], 'duration': 634.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks184515.jpg', 'highlights': ["The app is built using Next.js, providing a beautiful tech stack and seamless functionality for wallet connection and asset management, resembling Coinbase's interface.", 'The process involves setting up Sanity as the backend and database, with a provided plan offering 200,000 API requests, 1 million API CDN requests, and 20 gigabytes of bandwidth for free.', 'The app allows users to receive Bitcoin and Ethereum, generating a functional QR code that provides the exact wallet address for transactions.', 'The installation process involves building the studio folder with the sanity files inside, and the schemas file is the crucial location for building and adding the schema.', 'The schema for the coin token includes defining fields such as name, symbol, contract address, USD price, and logo, with specific data types for each field such as string or image.', 'Sanity database highlighted for its ease of use, scalability, and real-time updates, utilized by big companies like Figma and Sonos, endorsed by Nike.', 'Demonstration of adding data entries for coins like Ethereum, Bitcoin, and Solana, including their symbols and prices.', 'The registration process for Sanity.io involves creating an account using Google, GitHub, or Email, with a free plan available for usage.']}, {'end': 2105.551, 'segs': [{'end': 1226.41, 'src': 'heatmap', 'start': 905.163, 'weight': 9, 'content': [{'end': 911.147, 'text': "so i'm going to install this package and there's one more package i need to install and instead of installing that later,", 'start': 905.163, 'duration': 5.984}, {'end': 914.03, 'text': "we're just going to go ahead and install that right now as well.", 'start': 911.147, 'duration': 2.883}, {'end': 918.032, 'text': "so i'm going to do yarn add and we're going to do sandy slash image URL.", 'start': 914.03, 'duration': 4.002}, {'end': 922.173, 'text': 'This will allow us to like, when I fetch the image here, like the logo.', 'start': 918.072, 'duration': 4.101}, {'end': 926.894, 'text': 'that package will allow me to turn that logo into an actual image instead of just a reference.', 'start': 922.173, 'duration': 4.721}, {'end': 928.775, 'text': 'Cause in the start, it just gives you a reference.', 'start': 926.994, 'duration': 1.781}, {'end': 929.335, 'text': 'All right.', 'start': 929.115, 'duration': 0.22}, {'end': 935.436, 'text': 'So now at the root level, what I want to do is I want to just do new folder.', 'start': 929.375, 'duration': 6.061}, {'end': 936.516, 'text': "We're going to call it lib.", 'start': 935.516, 'duration': 1}, {'end': 942.777, 'text': "And then inside of this lib folder, we're going to create a new file and I'm going to say sanity.js.", 'start': 936.736, 'duration': 6.041}, {'end': 945.418, 'text': "Okay And we're just going to do import sanity.js.", 'start': 942.957, 'duration': 2.461}, {'end': 947.579, 'text': 'client from sanity client.', 'start': 945.578, 'duration': 2.001}, {'end': 955.722, 'text': 'And because this project is going to be pretty big, I want to kind of move through the setups and the front end processes quickly.', 'start': 947.819, 'duration': 7.903}, {'end': 958.043, 'text': 'So I might be like skipping past some of the code.', 'start': 955.782, 'duration': 2.261}, {'end': 959.484, 'text': "Not that it's not going to show it.", 'start': 958.123, 'duration': 1.361}, {'end': 960.524, 'text': "I'm not going to show it to you.", 'start': 959.604, 'duration': 0.92}, {'end': 963.325, 'text': "I'm going to be moving past the front end part pretty quickly,", 'start': 960.664, 'duration': 2.661}, {'end': 968.548, 'text': 'because I want to get to the more novel things like blockchain and then the back end part and spend more time on that.', 'start': 963.325, 'duration': 5.223}, {'end': 971.829, 'text': 'OK, so just kind of letting you know that as we keep going through it.', 'start': 968.688, 'duration': 3.141}, {'end': 972.129, 'text': 'All right.', 'start': 971.889, 'duration': 0.24}, {'end': 974.931, 'text': 'So inside of this, I got my sanity client.', 'start': 972.189, 'duration': 2.742}, {'end': 979.554, 'text': "Now I'm going to just set that up and we're going to export cons client and we're going to say sanity client.", 'start': 974.991, 'duration': 4.563}, {'end': 982.356, 'text': "Okay And then we're going to give it a project ID.", 'start': 979.714, 'duration': 2.642}, {'end': 984.838, 'text': 'Now I need to go get the ID for this project.', 'start': 982.576, 'duration': 2.262}, {'end': 990.441, 'text': "So what we're going to do is we're going to go to our sanity.io, slash, manage page right?", 'start': 984.958, 'duration': 5.483}, {'end': 993.103, 'text': "And on this page I'm going to go to Coinbase blockchain app.", 'start': 990.481, 'duration': 2.622}, {'end': 995.185, 'text': 'And then there is my project ID.', 'start': 993.203, 'duration': 1.982}, {'end': 997.186, 'text': "I'm just going to copy that over.", 'start': 995.325, 'duration': 1.861}, {'end': 1002.847, 'text': "and we're going to paste that in and then i'm going to say data set is production api version.", 'start': 997.586, 'duration': 5.261}, {'end': 1010.609, 'text': "you need to give it a specific one, otherwise sometimes it breaks or errors out and then we're going to go ahead and give it a token here.", 'start': 1002.847, 'duration': 7.762}, {'end': 1013.79, 'text': "so for the token, what we're going to do is inside of our manage,", 'start': 1010.609, 'duration': 3.181}, {'end': 1021.394, 'text': "i'm going to go ahead to my api and i'm going to add api token hit editor and I'm just gonna say Coinbase app.", 'start': 1013.79, 'duration': 7.604}, {'end': 1024.037, 'text': "Just hit save, and then it's gonna give me this token.", 'start': 1021.514, 'duration': 2.523}, {'end': 1027.319, 'text': "I'm gonna simply go ahead and paste that in right here.", 'start': 1024.357, 'duration': 2.962}, {'end': 1033.207, 'text': "Got that token, and then we're just gonna say at the end, use CDN, and I'm just gonna set that to false.", 'start': 1027.481, 'duration': 5.726}, {'end': 1035.829, 'text': "Okay, this will make sure that I'm always getting fresh data.", 'start': 1033.227, 'duration': 2.602}, {'end': 1044.756, 'text': 'Now, in here in Coors Origin, I want to go ahead and enable localhost 3000 so that my app actually works.', 'start': 1035.89, 'duration': 8.866}, {'end': 1049.978, 'text': "And then once you deploy your app, you're gonna need to add your deployed apps URL in here as well.", 'start': 1044.996, 'duration': 4.982}, {'end': 1053.28, 'text': "That way your app is authorized, okay? So that's what you wanna do.", 'start': 1050.079, 'duration': 3.201}, {'end': 1054.481, 'text': 'You wanna make sure that you have this.', 'start': 1053.3, 'duration': 1.181}, {'end': 1057.342, 'text': "Another thing we're going to need are our assets.", 'start': 1054.781, 'duration': 2.561}, {'end': 1060.384, 'text': "So let's make sure we go ahead and download them now.", 'start': 1057.382, 'duration': 3.002}, {'end': 1066.407, 'text': 'So we, I will have the, this Google drive folder linked in the video, in the description.', 'start': 1060.624, 'duration': 5.783}, {'end': 1068.148, 'text': 'So you guys can go ahead and get access to it.', 'start': 1066.427, 'duration': 1.721}, {'end': 1072.75, 'text': "So we're going to need code assets, right? So I'm going to need this and I'm going to need this other one.", 'start': 1068.168, 'duration': 4.582}, {'end': 1077.311, 'text': "Okay So what I'm going to do is go ahead and I'm going to download this folder.", 'start': 1072.97, 'duration': 4.341}, {'end': 1080.492, 'text': 'So sanity assets is going to be the first thing that I download.', 'start': 1077.451, 'duration': 3.041}, {'end': 1083.653, 'text': 'And then I need to download my code assets folder as well.', 'start': 1080.612, 'duration': 3.041}, {'end': 1085.734, 'text': "Let's go ahead and download this as well.", 'start': 1083.833, 'duration': 1.901}, {'end': 1088.054, 'text': 'So now I have both of them downloaded.', 'start': 1085.874, 'duration': 2.18}, {'end': 1092.015, 'text': 'So now you can see code assets folder and sanity assets folder.', 'start': 1088.174, 'duration': 3.841}, {'end': 1098.117, 'text': "And the code assets folder we'll be using in a little bit, but sanity assets is what we need right away.", 'start': 1092.335, 'duration': 5.782}, {'end': 1106.024, 'text': "And for sanity assets, all I'm gonna be doing is I just need them for my sanity, okay? So I can go ahead and upload them on sanity.", 'start': 1098.277, 'duration': 7.747}, {'end': 1107.265, 'text': "So I'm just adding it here.", 'start': 1106.044, 'duration': 1.221}, {'end': 1108.767, 'text': "I'm using this app called Yoink.", 'start': 1107.366, 'duration': 1.401}, {'end': 1111.209, 'text': 'It allows me to kind of just put a placeholder there.', 'start': 1108.847, 'duration': 2.362}, {'end': 1115.233, 'text': "You don't need Yoink, okay? But you just need access to those photos.", 'start': 1111.349, 'duration': 3.884}, {'end': 1120.837, 'text': "And now I'm going to go to my coins, okay, on my localhost 3333 slash dash slash coins.", 'start': 1115.433, 'duration': 5.404}, {'end': 1122.279, 'text': "I'm just going to upload the images.", 'start': 1120.918, 'duration': 1.361}, {'end': 1125.842, 'text': "So for Solana, I'm going to upload the Solana image here.", 'start': 1122.339, 'duration': 3.503}, {'end': 1129.344, 'text': "And once that's done, I'm just simply going to hit publish on that.", 'start': 1126.042, 'duration': 3.302}, {'end': 1131.106, 'text': 'So you can see the Solana image is now there.', 'start': 1129.424, 'duration': 1.682}, {'end': 1136.03, 'text': "Now for Bitcoin, we're going to use the Bitcoin image and simply going to hit publish on that.", 'start': 1131.386, 'duration': 4.644}, {'end': 1139.272, 'text': "And then we're going to go on Ethereum and use the ETH image.", 'start': 1136.13, 'duration': 3.142}, {'end': 1141.935, 'text': 'Okay, simply going to go and hit publish on that.', 'start': 1139.513, 'duration': 2.422}, {'end': 1144.857, 'text': 'And basically all of our images should be uploaded now.', 'start': 1142.155, 'duration': 2.702}, {'end': 1150.36, 'text': "The code assets folder, we're going to come back to later, but just remember where you've downloaded it for now.", 'start': 1144.997, 'duration': 5.363}, {'end': 1153.262, 'text': 'The next thing we need to set up is MetaMask.', 'start': 1150.5, 'duration': 2.762}, {'end': 1153.822, 'text': 'All right.', 'start': 1153.602, 'duration': 0.22}, {'end': 1161.407, 'text': "So now that we're on third web, the first thing we need to do is make sure in our MetaMask, we have Rinkeby test network ready to go.", 'start': 1153.842, 'duration': 7.565}, {'end': 1163.388, 'text': "That's the test network for Ethereum.", 'start': 1161.507, 'duration': 1.881}, {'end': 1167.07, 'text': "So all I'm going to do is I'm going to hit my account icon.", 'start': 1163.568, 'duration': 3.502}, {'end': 1174.593, 'text': "Okay And Coinbase blockchain, I'm going to hit settings, go to advanced, And then we're just going to go ahead and turn show test networks.", 'start': 1167.33, 'duration': 7.263}, {'end': 1175.634, 'text': "We're going to turn it on.", 'start': 1174.633, 'duration': 1.001}, {'end': 1176.514, 'text': 'Okay On.', 'start': 1175.894, 'duration': 0.62}, {'end': 1184.516, 'text': "Now when I hit X and I go back and when I click here, you'll see that I see a bunch of stuff, including Rinkeby test network.", 'start': 1176.674, 'duration': 7.842}, {'end': 1186.657, 'text': "Okay That's your Ethereum test network.", 'start': 1184.696, 'duration': 1.961}, {'end': 1187.557, 'text': 'So click that.', 'start': 1186.737, 'duration': 0.82}, {'end': 1189.338, 'text': 'I have zero ETH currently.', 'start': 1187.897, 'duration': 1.441}, {'end': 1191.418, 'text': 'When you go into it, you should have zero ETH as well.', 'start': 1189.358, 'duration': 2.06}, {'end': 1191.998, 'text': 'All right.', 'start': 1191.698, 'duration': 0.3}, {'end': 1193.839, 'text': "We're going to go ahead, click start here.", 'start': 1192.078, 'duration': 1.761}, {'end': 1196.381, 'text': "And we're gonna click, let's get started.", 'start': 1194.219, 'duration': 2.162}, {'end': 1200.004, 'text': "MetaMask, I'm going to connect my MetaMask to it.", 'start': 1196.641, 'duration': 3.363}, {'end': 1201.665, 'text': 'It detects that I have zero ETH.', 'start': 1200.164, 'duration': 1.501}, {'end': 1202.706, 'text': "Let's hit continue.", 'start': 1201.725, 'duration': 0.981}, {'end': 1205.228, 'text': "Let's hit the Rinkeby testnet.", 'start': 1202.946, 'duration': 2.282}, {'end': 1207.149, 'text': "And let's do create first project.", 'start': 1205.368, 'duration': 1.781}, {'end': 1209.151, 'text': "Now it's gonna say I have insufficient funds.", 'start': 1207.269, 'duration': 1.882}, {'end': 1212.895, 'text': "So we're going to go ahead and click the link to get the funds.", 'start': 1209.451, 'duration': 3.444}, {'end': 1218.001, 'text': 'This is me getting fake Ethereum, AKA Ethereum for my test network.', 'start': 1213.175, 'duration': 4.826}, {'end': 1219.382, 'text': 'I do not need link.', 'start': 1218.161, 'duration': 1.221}, {'end': 1220.664, 'text': 'So you can X that.', 'start': 1219.543, 'duration': 1.121}, {'end': 1226.41, 'text': "Okay, And I do need to put my account address, because it's asking where do you want to receive that money?", 'start': 1220.784, 'duration': 5.626}], 'summary': 'Installing packages, setting up sanity client, uploading images, configuring metamask for rinkeby test network.', 'duration': 321.247, 'max_score': 905.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks905163.jpg'}, {'end': 1392.301, 'src': 'embed', 'start': 1362.381, 'weight': 8, 'content': [{'end': 1365.564, 'text': 'We will add module and we will do one last one token.', 'start': 1362.381, 'duration': 3.183}, {'end': 1367.325, 'text': "Let's go here, Ethereum.", 'start': 1365.604, 'duration': 1.721}, {'end': 1369.566, 'text': 'And I will say ETH.', 'start': 1367.905, 'duration': 1.661}, {'end': 1371.287, 'text': 'This will be our created ETH.', 'start': 1369.686, 'duration': 1.601}, {'end': 1372.989, 'text': "These are our tokens we're making.", 'start': 1371.327, 'duration': 1.662}, {'end': 1374.069, 'text': 'You can call it whatever you want.', 'start': 1373.029, 'duration': 1.04}, {'end': 1376.771, 'text': 'I could have called it CPT, like clever programmer tokens.', 'start': 1374.089, 'duration': 2.682}, {'end': 1379.433, 'text': 'Okay, you can call it whatever you want.', 'start': 1376.791, 'duration': 2.642}, {'end': 1381.734, 'text': "These are your own tokens that you're making.", 'start': 1379.473, 'duration': 2.261}, {'end': 1385.497, 'text': 'Okay, now we have Ethereum is done as well.', 'start': 1382.255, 'duration': 3.242}, {'end': 1386.097, 'text': 'all right.', 'start': 1385.837, 'duration': 0.26}, {'end': 1389.039, 'text': "so now what we're gonna do is we're gonna give ourselves some tokens.", 'start': 1386.097, 'duration': 2.942}, {'end': 1392.301, 'text': "okay. so in bitcoin, let's mint a couple of bitcoin.", 'start': 1389.039, 'duration': 3.262}], 'summary': 'Creating ethereum tokens and minting bitcoin tokens.', 'duration': 29.92, 'max_score': 1362.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks1362381.jpg'}, {'end': 1524.404, 'src': 'embed', 'start': 1493.231, 'weight': 0, 'content': [{'end': 1495.293, 'text': 'And the first method was just pure creation.', 'start': 1493.231, 'duration': 2.062}, {'end': 1501.64, 'text': "That's this contract address, right? You could see probably for all of the ones that we've made, you'll find them.", 'start': 1495.413, 'duration': 6.227}, {'end': 1504.143, 'text': 'So here are this fake Solana that I just created.', 'start': 1501.68, 'duration': 2.463}, {'end': 1514.234, 'text': 'If I search it by the contract address, it should actually pull the fake Solana, right? And here it goes creation by who, how much minted everything.', 'start': 1504.263, 'duration': 9.971}, {'end': 1519.88, 'text': 'If I go inside here, I can see it says Rinkeby test net transaction only.', 'start': 1514.514, 'duration': 5.366}, {'end': 1524.404, 'text': 'And I can see that tokens were transferred from here to my account.', 'start': 1520.24, 'duration': 4.164}], 'summary': 'Demonstrated creation of fake solana tokens with transaction details.', 'duration': 31.173, 'max_score': 1493.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks1493231.jpg'}, {'end': 1567.959, 'src': 'embed', 'start': 1537.956, 'weight': 1, 'content': [{'end': 1540.358, 'text': 'So hit import token, paste it, wait for it.', 'start': 1537.956, 'duration': 2.402}, {'end': 1546.2, 'text': 'And the BTC symbol should automatically pop up and notice that I have seven Bitcoin or seven BTC.', 'start': 1540.478, 'duration': 5.722}, {'end': 1549.822, 'text': 'I can copy the Solana one and do the same process here.', 'start': 1546.48, 'duration': 3.342}, {'end': 1554.546, 'text': "so i'm going to hit import tokens paste should say soul and 50 soul.", 'start': 1550.322, 'duration': 4.224}, {'end': 1555.967, 'text': 'indeed, copy this.', 'start': 1554.546, 'duration': 1.421}, {'end': 1558.21, 'text': 'uh, import tokens paste.', 'start': 1555.967, 'duration': 2.243}, {'end': 1562.333, 'text': 'so now i have, uh, solana, eth and bitcoin.', 'start': 1558.21, 'duration': 4.123}, {'end': 1565.076, 'text': 'okay, and clearly you can see, this is the eth that we have created.', 'start': 1562.333, 'duration': 2.743}, {'end': 1567.959, 'text': 'right. this is separate from this e and this is our eth.', 'start': 1565.076, 'duration': 2.883}], 'summary': 'Imported 7 btc, 50 sol, and eth tokens successfully.', 'duration': 30.003, 'max_score': 1537.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks1537956.jpg'}, {'end': 1791.171, 'src': 'embed', 'start': 1760.065, 'weight': 4, 'content': [{'end': 1763.807, 'text': "Okay So I'm going to go to my app.js.", 'start': 1760.065, 'duration': 3.742}, {'end': 1764.467, 'text': 'All right.', 'start': 1764.227, 'duration': 0.24}, {'end': 1768.49, 'text': "And that's going to be in pages underscore app.js is this file right here.", 'start': 1764.607, 'duration': 3.883}, {'end': 1773.835, 'text': 'Now what I want to do is I need to add in my third web.', 'start': 1769.25, 'duration': 4.585}, {'end': 1779.481, 'text': 'So in order to do that, I actually will need to write this line here.', 'start': 1775.236, 'duration': 4.245}, {'end': 1784.726, 'text': "And to make all of this work, I'll actually need to install all of these dependencies.", 'start': 1780.162, 'duration': 4.564}, {'end': 1791.171, 'text': "So here, according to third web's documentation, what I need to do is I need to actually install all of these here.", 'start': 1785.447, 'duration': 5.724}], 'summary': 'Adding third web to app.js, requires installing dependencies.', 'duration': 31.106, 'max_score': 1760.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks1760065.jpg'}, {'end': 1979.899, 'src': 'embed', 'start': 1952.584, 'weight': 2, 'content': [{'end': 1955.445, 'text': "Okay, so we're going to use styled components for this.", 'start': 1952.584, 'duration': 2.861}, {'end': 1959.646, 'text': "I don't need next head here either, styled components.", 'start': 1956.045, 'duration': 3.601}, {'end': 1968.109, 'text': 'Okay. and then the next thing that I really need is I need to make sure that my hooks I have my third web hooks,', 'start': 1959.666, 'duration': 8.443}, {'end': 1972.371, 'text': "because that's what we're going to need in order to kind of provide that authentication.", 'start': 1968.109, 'duration': 4.262}, {'end': 1979.899, 'text': "Okay Outside of that, let's go to this return and get rid of everything inside of here for now.", 'start': 1973.757, 'duration': 6.142}], 'summary': 'Using styled components, implementing web hooks for authentication.', 'duration': 27.315, 'max_score': 1952.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks1952584.jpg'}, {'end': 2105.551, 'src': 'embed', 'start': 2047.754, 'weight': 5, 'content': [{'end': 2052.717, 'text': "Okay And then for this button, we'll just say connect wallet.", 'start': 2047.754, 'duration': 4.963}, {'end': 2055.879, 'text': 'All right.', 'start': 2055.539, 'duration': 0.34}, {'end': 2056.78, 'text': 'Connect wallet.', 'start': 2056.039, 'duration': 0.741}, {'end': 2059.641, 'text': "And then I'm going to say here on click.", 'start': 2057.54, 'duration': 2.101}, {'end': 2063.964, 'text': 'Connect wallet.', 'start': 2062.944, 'duration': 1.02}, {'end': 2066.766, 'text': "And we're going to do it injected.", 'start': 2065.045, 'duration': 1.721}, {'end': 2073.312, 'text': "Okay So let's give it a try and let's see what happens.", 'start': 2069.047, 'duration': 4.265}, {'end': 2074.333, 'text': "So I'll hit connect wallet.", 'start': 2073.331, 'duration': 1.002}, {'end': 2080.319, 'text': 'So all I had to do was make sure that my other wallets were disconnected.', 'start': 2076.475, 'duration': 3.844}, {'end': 2086.425, 'text': 'So meaning like, you know, for example, one of my other wallets was connected to localhost 3000.', 'start': 2080.599, 'duration': 5.826}, {'end': 2091.489, 'text': 'So I simply went ahead into it and I just went to connected sites and removed.', 'start': 2086.425, 'duration': 5.064}, {'end': 2096.087, 'text': 'I removed a localhost 3000, right?', 'start': 2093.146, 'duration': 2.941}, {'end': 2102.05, 'text': 'So now, coming back into my Coinbase blockchain wallet, if I hit connect wallet, it pops up', 'start': 2096.547, 'duration': 5.503}, {'end': 2105.551, 'text': 'So clearly it seems like that it is working.', 'start': 2102.17, 'duration': 3.381}], 'summary': 'Successfully connected coinbase blockchain wallet after disconnecting other wallets from localhost 3000.', 'duration': 57.797, 'max_score': 2047.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks2047754.jpg'}], 'start': 819.623, 'title': 'Creating and setting up cryptocurrencies, tokens, contracts, and authentication', 'summary': 'Covers creating custom cryptocurrencies, setting up front-end, tokens for solana, bitcoin, and ethereum, involving 0.1 eth for rinkeby test network, minting 7 bitcoin, 50 solana, and 15 ethereum, and setting up third-party authentication and front-end development.', 'chapters': [{'end': 1115.233, 'start': 819.623, 'title': 'Creating custom cryptocurrencies and setting up the front end', 'summary': 'Covers the process of creating custom cryptocurrencies on a test network, setting up the front-end with various packages and configurations, and downloading and uploading assets for use in the project.', 'duration': 295.61, 'highlights': ['Creating custom cryptocurrencies on a test network The project aims to create its own Solana, Ethereum, and Bitcoin on a test network rather than tapping into existing ones, emphasizing the need for setup and the eventual success once set up correctly.', "Setting up the front end with various packages and configurations The process involves setting up MetaMask, Sanity, and third web, and installing packages like 'sanity client' and 'sanity/image URL' to enable interaction and use of Sanity on the front end.", 'Downloading and uploading assets for use in the project The speaker discusses the need to download and upload code and sanity assets, providing specific instructions and emphasizing the importance of these assets for the project.']}, {'end': 1684.894, 'start': 1115.433, 'title': 'Setting up tokens and contracts', 'summary': 'Details the process of setting up tokens for solana, bitcoin, and ethereum, including uploading images, setting up metamask with rinkeby test network, creating tokens using third web, and importing contract addresses to metamask and sanity, involving 0.1 eth for rinkeby test network and minting 7 bitcoin, 50 solana, and 15 ethereum.', 'duration': 569.461, 'highlights': ['Setting up MetaMask with Rinkeby test network The chapter explains the process of setting up MetaMask with Rinkeby test network, involving accessing account settings, turning on show test networks, and getting 0.1 ETH for testing.', 'Creating tokens using third web The chapter discusses the process of creating tokens using third web, making it easy to set up tokens for Solana, Bitcoin, and Ethereum, including adding modules, deploying modules, and paying gas fees for minting and creating tokens.', 'Importing contract addresses to MetaMask and sanity The chapter explains the process of importing contract addresses to MetaMask, involving importing tokens for Solana, Ethereum, and Bitcoin, and updating sanity with the contract addresses for each token.']}, {'end': 2105.551, 'start': 1685.354, 'title': 'Setting up authentication and front-end', 'summary': 'Covers setting up third-party authentication and front-end development, including installing dependencies, wrapping the app in third-party authentication, and adding a connect wallet button for front-end interaction.', 'duration': 420.197, 'highlights': ['The chapter covers setting up third-party authentication and front-end development The chapter discusses setting up third-party authentication and front-end development, including installing dependencies and wrapping the app in third-party authentication.', 'Installing dependencies for third-party authentication The speaker explains the process of installing dependencies for third-party authentication, including using npm or yarn to install necessary dependencies like third-web, third-web-react, third-web-hooks, and third-web SDK.', 'Wrapping the entire app in third-party authentication The speaker demonstrates wrapping the entire app in third-party authentication, allowing global access to authentication throughout the components and pages of the app.', 'Adding a connect wallet button for front-end interaction The chapter includes adding a connect wallet button with functionality to interact with the front-end, demonstrating how to connect the wallet to the app and verify its functionality.']}], 'duration': 1285.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks819623.jpg', 'highlights': ['Creating custom cryptocurrencies on a test network emphasizing the need for setup and eventual success', 'Setting up MetaMask with Rinkeby test network involving accessing account settings and getting 0.1 ETH for testing', 'Setting up the front end with various packages and configurations involving MetaMask, Sanity, and third web', 'Creating tokens using third web making it easy to set up tokens for Solana, Bitcoin, and Ethereum', 'Importing contract addresses to MetaMask and sanity for tokens of Solana, Ethereum, and Bitcoin', 'Setting up third-party authentication and front-end development including installing dependencies and wrapping the app', 'Installing dependencies for third-party authentication using npm or yarn to install necessary dependencies', 'Wrapping the entire app in third-party authentication allowing global access to authentication throughout the components and pages', 'Adding a connect wallet button for front-end interaction demonstrating how to connect the wallet to the app and verify its functionality', 'Downloading and uploading assets for use in the project providing specific instructions and emphasizing the importance of these assets']}, {'end': 3074.108, 'segs': [{'end': 2234.89, 'src': 'embed', 'start': 2203.442, 'weight': 0, 'content': [{'end': 2208.703, 'text': "And then the font size, right? And that's how we're getting the font size and padding is how we're getting this padding.", 'start': 2203.442, 'duration': 5.261}, {'end': 2212.464, 'text': 'And then of course, border radius, which gives us those nice rounded corners.', 'start': 2208.743, 'duration': 3.721}, {'end': 2218.166, 'text': 'Okay, and then on hover, it turns into a pointer like that.', 'start': 2213.765, 'duration': 4.401}, {'end': 2222.027, 'text': 'Okay, so when I click, boom, it pops up right there.', 'start': 2218.186, 'duration': 3.841}, {'end': 2223.827, 'text': "Okay, I'm not gonna connect just yet.", 'start': 2222.047, 'duration': 1.78}, {'end': 2226.028, 'text': 'Just gonna finish up the styling on this.', 'start': 2224.388, 'duration': 1.64}, {'end': 2234.89, 'text': 'All right, and the next thing we need to do is add details, And the details are just going to say right underneath that button.', 'start': 2226.848, 'duration': 8.042}], 'summary': 'Styling includes font size, padding, border radius, hover effect, and pop-up behavior.', 'duration': 31.448, 'max_score': 2203.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks2203442.jpg'}, {'end': 2810.129, 'src': 'embed', 'start': 2781.145, 'weight': 1, 'content': [{'end': 2784.106, 'text': 'So control C this is my sanity studio that I have running.', 'start': 2781.145, 'duration': 2.961}, {'end': 2786.907, 'text': 'This is my next app that I have running.', 'start': 2784.306, 'duration': 2.601}, {'end': 2789.508, 'text': 'Okay So just control C hit up and hit enter.', 'start': 2787.027, 'duration': 2.481}, {'end': 2793.529, 'text': 'So yarn dev or NPM run dev, and that should like fix it up.', 'start': 2789.548, 'duration': 3.981}, {'end': 2795.15, 'text': "So now let's refresh.", 'start': 2794.29, 'duration': 0.86}, {'end': 2798.661, 'text': "And now it's looking the way it needs to be.", 'start': 2796.94, 'duration': 1.721}, {'end': 2799.122, 'text': "That's fine.", 'start': 2798.681, 'duration': 0.441}, {'end': 2803.585, 'text': "And now we're basically going to add a wrapper around this, the one that we just created.", 'start': 2799.562, 'duration': 4.023}, {'end': 2805.346, 'text': "Let's put that right there.", 'start': 2804.325, 'duration': 1.021}, {'end': 2807.227, 'text': "So let's full screen this.", 'start': 2806.147, 'duration': 1.08}, {'end': 2810.129, 'text': "So with the wrapper, you can see it's, it's looking nice.", 'start': 2807.267, 'duration': 2.862}], 'summary': 'Developing an app, fixing issues, adding a wrapper for improved appearance.', 'duration': 28.984, 'max_score': 2781.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks2781145.jpg'}, {'end': 3055.827, 'src': 'embed', 'start': 3026.989, 'weight': 2, 'content': [{'end': 3028.29, 'text': "So let's go to our coins.", 'start': 3026.989, 'duration': 1.301}, {'end': 3034.274, 'text': "So inside of coins, right, all I'm doing here is we're importing all of our logos.", 'start': 3029.071, 'duration': 5.203}, {'end': 3036.155, 'text': "So that's in our assets folder.", 'start': 3034.594, 'duration': 1.561}, {'end': 3037.876, 'text': "So I'm just importing all of them.", 'start': 3036.475, 'duration': 1.401}, {'end': 3040.638, 'text': "And then I'm just creating our coins.", 'start': 3039.017, 'duration': 1.621}, {'end': 3042.539, 'text': 'So this is just static data here.', 'start': 3040.938, 'duration': 1.601}, {'end': 3044.3, 'text': "So I'm creating my coins.", 'start': 3042.899, 'duration': 1.401}, {'end': 3046.781, 'text': 'how much of these coins I have?', 'start': 3044.3, 'duration': 2.481}, {'end': 3048.102, 'text': "what's the balance in there?", 'start': 3046.781, 'duration': 1.321}, {'end': 3053.265, 'text': "And then I'm putting Bitcoin Solana in there Polygon in there Ethereum.", 'start': 3048.322, 'duration': 4.943}, {'end': 3055.827, 'text': "Just saying what's the balance, right? And that's how..", 'start': 3054.026, 'duration': 1.801}], 'summary': 'Importing logos and creating static data for various coins.', 'duration': 28.838, 'max_score': 3026.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks3026989.jpg'}], 'start': 2106.071, 'title': 'Dashboard ui creation', 'summary': 'Covers the creation of a dashboard ui, including styling for buttons, conditional rendering based on user login, and building a visually appealing and functional dashboard with responsive design.', 'chapters': [{'end': 2249.579, 'start': 2106.071, 'title': 'Styling and button creation', 'summary': 'Discusses the creation of a wrapper, styling for a button, and adding details, emphasizing the use of css properties such as font size, padding, and border radius.', 'duration': 143.508, 'highlights': ['Creation of wrapper for styling The speaker discusses creating a wrapper for styling, which will be used for the entire content, demonstrating an understanding of front-end development techniques.', 'Styling the wallet connect button The speaker explains the process of styling the wallet connect button, focusing on CSS properties such as font color, font weight, and padding to achieve a desired appearance.', 'Adding details below the button The speaker highlights the addition of details underneath the button, specifically mentioning the requirement of using Chrome to run the app, providing important information for the user experience.']}, {'end': 2600.769, 'start': 2249.599, 'title': 'Conditional rendering and dashboard creation', 'summary': 'Discusses conditional rendering based on user login status, with a demonstration of the rendering of user address and the creation of a dashboard component with styled elements and buttons, resulting in a responsive design.', 'duration': 351.17, 'highlights': ["Creation of conditional rendering based on user login status The chapter demonstrates the creation of conditional rendering to display different content based on the user's login status, with a clear demonstration of rendering the user's address when logged in and showing a specific page when not logged in.", 'Creation of a dashboard component with styled elements and buttons The chapter covers the creation of a dashboard component with styled elements, including wrapper styling, title styling, buttons container, and individual button styling, resulting in a responsive design with buy and sell buttons.']}, {'end': 3074.108, 'start': 2601.469, 'title': 'Building dashboard ui', 'summary': 'Details the process of building the dashboard ui, including adding buy and sell buttons, creating a wrapper and container, adding a sidebar, and incorporating static data and icons, resulting in a visually appealing and functional dashboard.', 'duration': 472.639, 'highlights': ['The process of adding buy and sell buttons to the header and ensuring they are placed within a wrapper and flex box is described, resulting in visually appealing buttons.', 'The creation of a wrapper and container for the entire page, along with the addition of a main container, is discussed, resulting in structurally organized UI elements.', 'The steps for incorporating static data, such as coins and logos, and installing the react icons package for the left-hand sidebar are outlined, leading to the preparation of essential data and icons for the dashboard.', 'The preparation and organization of assets and static folders, including copying files and creating folders, is explained, ensuring the availability of necessary assets and static content for the dashboard.', 'The process of creating static data for coins, including importing logos and specifying balances, USD values, and price changes, is detailed, resulting in the population of coins with relevant information.']}], 'duration': 968.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks2106071.jpg', 'highlights': ["Creation of conditional rendering based on user login status The chapter demonstrates the creation of conditional rendering to display different content based on the user's login status, with a clear demonstration of rendering the user's address when logged in and showing a specific page when not logged in.", 'The process of adding buy and sell buttons to the header and ensuring they are placed within a wrapper and flex box is described, resulting in visually appealing buttons.', 'The creation of a wrapper and container for the entire page, along with the addition of a main container, is discussed, resulting in structurally organized UI elements.', 'The steps for incorporating static data, such as coins and logos, and installing the react icons package for the left-hand sidebar are outlined, leading to the preparation of essential data and icons for the dashboard.', 'The preparation and organization of assets and static folders, including copying files and creating folders, is explained, ensuring the availability of necessary assets and static content for the dashboard.']}, {'end': 4145.16, 'segs': [{'end': 3171.542, 'src': 'embed', 'start': 3143.013, 'weight': 1, 'content': [{'end': 3147.854, 'text': "So basically, you know, that's the whole table, but then the table row styling is what's needed as well.", 'start': 3143.013, 'duration': 4.841}, {'end': 3149.215, 'text': 'What each row will look like.', 'start': 3147.894, 'duration': 1.321}, {'end': 3154.137, 'text': 'And, um, and then we have the table item, of course.', 'start': 3150.155, 'duration': 3.982}, {'end': 3156.277, 'text': "There's just a couple of things after that.", 'start': 3154.577, 'duration': 1.7}, {'end': 3160.699, 'text': 'So we got table item, and then we also want to make sure we have a divider.', 'start': 3156.377, 'duration': 4.322}, {'end': 3162.64, 'text': 'So you see that divider right there.', 'start': 3161.199, 'duration': 1.441}, {'end': 3163.62, 'text': 'We need access to that.', 'start': 3162.7, 'duration': 0.92}, {'end': 3171.542, 'text': 'All right, and then this is pretty much it as far as this is concerned.', 'start': 3166.178, 'duration': 5.364}], 'summary': 'Describing table structure and styling elements.', 'duration': 28.529, 'max_score': 3143.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks3143013.jpg'}, {'end': 3252.243, 'src': 'embed', 'start': 3196.963, 'weight': 2, 'content': [{'end': 3202.368, 'text': "And then inside of my portfolio table, we're gonna need table item.", 'start': 3196.963, 'duration': 5.405}, {'end': 3206.471, 'text': "So let's see if we created one for our table item.", 'start': 3202.928, 'duration': 3.543}, {'end': 3210.454, 'text': "So we're gonna need our table item.", 'start': 3206.491, 'duration': 3.963}, {'end': 3221.991, 'text': "All right, so I'm gonna say table item And then in here, I'm going to add my title and that's going to be your assets just like this.", 'start': 3211.615, 'duration': 10.376}, {'end': 3225.432, 'text': "Now let's just make sure our portfolio component is showing up.", 'start': 3222.871, 'duration': 2.561}, {'end': 3229.814, 'text': "So we're going to go to our dashboard.js.", 'start': 3225.812, 'duration': 4.002}, {'end': 3233.869, 'text': "And actually we're not gonna add it to our dashboard.", 'start': 3231.767, 'duration': 2.102}, {'end': 3237.091, 'text': "What we're gonna do is we're gonna create another component.", 'start': 3234.269, 'duration': 2.822}, {'end': 3238.793, 'text': "It's gonna be called main.js.", 'start': 3237.111, 'duration': 1.682}, {'end': 3243.336, 'text': "Main.js will contain everything that's in the main.", 'start': 3239.773, 'duration': 3.563}, {'end': 3246.979, 'text': "So we're gonna add portfolio in there.", 'start': 3244.497, 'duration': 2.482}, {'end': 3249.241, 'text': "So let's go ahead and do that.", 'start': 3247.559, 'duration': 1.682}, {'end': 3252.243, 'text': "So first of all, I'm just gonna do rfce, perfect.", 'start': 3249.381, 'duration': 2.862}], 'summary': "Creating a new component 'main.js' to contain the 'portfolio' component and adding 'table item' to it.", 'duration': 55.28, 'max_score': 3196.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks3196963.jpg'}, {'end': 3314.325, 'src': 'embed', 'start': 3283.591, 'weight': 0, 'content': [{'end': 3295.117, 'text': "Cool Now let's go to our app and we will add main to our, to our homepage, right? So our homepage is our dashboard.js.", 'start': 3283.591, 'duration': 11.526}, {'end': 3300.699, 'text': "So let's go to our dashboard.js file, which is in our pages.", 'start': 3295.737, 'duration': 4.962}, {'end': 3308.082, 'text': "And inside of here, I'm going to add main right underneath the header, but still inside of the main container.", 'start': 3301.82, 'duration': 6.262}, {'end': 3311.284, 'text': "So let's go main and let's hit enter.", 'start': 3308.102, 'duration': 3.182}, {'end': 3314.325, 'text': 'So it auto completes it in auto imports it from here.', 'start': 3311.324, 'duration': 3.001}], 'summary': "Adding 'main' to the dashboard.js file in the app for homepage enhancement.", 'duration': 30.734, 'max_score': 3283.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks3283591.jpg'}, {'end': 3520.075, 'src': 'embed', 'start': 3485.25, 'weight': 4, 'content': [{'end': 3489.814, 'text': 'okay?, All right, so right, underneath this table item.', 'start': 3485.25, 'duration': 4.564}, {'end': 3493.537, 'text': "now let's go ahead and add in our divider.", 'start': 3489.814, 'duration': 3.723}, {'end': 3502.405, 'text': "And then under this divider, I'm just going to make a div, and then here we'll actually now start forming, showing our coins.", 'start': 3493.557, 'duration': 8.848}, {'end': 3508.25, 'text': "So I'll do coins.map, And this coins is coming from static coins.", 'start': 3502.525, 'duration': 5.725}, {'end': 3508.63, 'text': 'All right.', 'start': 3508.39, 'duration': 0.24}, {'end': 3510.631, 'text': "So it's being imported from there just like that.", 'start': 3508.65, 'duration': 1.981}, {'end': 3520.075, 'text': "So in our coins.map, I'm going to now say for each coin that you get, do the following.", 'start': 3512.472, 'duration': 7.603}], 'summary': 'Adding divider and displaying coins using coins.map from static coins.', 'duration': 34.825, 'max_score': 3485.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks3485250.jpg'}, {'end': 3578.159, 'src': 'embed', 'start': 3545.845, 'weight': 8, 'content': [{'end': 3548.507, 'text': "And then we're going to use a divider.", 'start': 3545.845, 'duration': 2.662}, {'end': 3562.298, 'text': "Now, before we go ahead and make that component, let's just comment this out real quick and let's just say H2 and we'll just give it the.", 'start': 3551.309, 'duration': 10.989}, {'end': 3562.978, 'text': 'can we try?', 'start': 3562.298, 'duration': 0.68}, {'end': 3571.03, 'text': "coin.name?. So at the very least now it's starting to show up in this kind of table.", 'start': 3562.978, 'duration': 8.052}, {'end': 3573.553, 'text': 'Of course, what we need to do is style this.', 'start': 3571.651, 'duration': 1.902}, {'end': 3578.159, 'text': "So we're going to go ahead and create our coin component now.", 'start': 3573.894, 'duration': 4.265}], 'summary': 'Creating a coin component with styling for a table, using a divider and showing coin names.', 'duration': 32.314, 'max_score': 3545.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks3545845.jpg'}], 'start': 3074.568, 'title': 'Building portfolio components, react component styling and mapping, and building coin component', 'summary': 'Explains the process of building portfolio components, including creating a wrapper, styling a portfolio table, implementing a main component, and adding rows to the table. it also discusses styling and mapping components in react, including using flex, importing images, and mapping through a coin list to display coin names and icons. additionally, it demonstrates building a coin component for a dashboard, including passing coin information, displaying coin details, and styling components, resulting in a completed table with dynamically added coins.', 'chapters': [{'end': 3423.383, 'start': 3074.568, 'title': 'Building portfolio components', 'summary': 'Explains the process of building portfolio components, including creating a wrapper, styling a portfolio table, implementing a main component, and adding rows to the table.', 'duration': 348.815, 'highlights': ['Creating a wrapper and adding content inside it The process involves creating a wrapper to hold everything together and adding content inside the wrapper.', 'Styling the portfolio table and its components The table and its components need to be styled, including ensuring good width and styling the table row and table item.', 'Implementing the main component and adding the portfolio The main component is implemented, and the portfolio is added inside the wrapper of the main component.', 'Adding rows to the portfolio table The process involves adding rows to the portfolio table and specifying the content for each row, such as name, balance, price, and allocation.']}, {'end': 3722.036, 'start': 3423.403, 'title': 'React component styling and mapping', 'summary': 'Discusses styling and mapping components in react, including using flex, importing images, and mapping through a coin list to display coin names and icons.', 'duration': 298.633, 'highlights': ['The chapter details the process of styling React components, such as using flex properties to create separation and importing optimized images using next image.', 'The transcript explains the mapping process of a coin list in React, including the iteration through each coin and the display of coin names and icons.', 'The discussion includes the usage of primary and secondary styling for text elements in the React components.']}, {'end': 4145.16, 'start': 3724.158, 'title': 'Building coin component', 'summary': 'Demonstrates building a coin component for a dashboard, including passing coin information, displaying coin details, and styling components, resulting in a completed table with dynamically added coins.', 'duration': 421.002, 'highlights': ['The chapter demonstrates building a coin component for a dashboard, including passing coin information, displaying coin details, and styling components. It covers the process of passing coin information from the dashboard, displaying coin name, sign, balance, price, change, and allocation, and styling components.', 'The completed table displays dynamically added coins with details. The table successfully displays dynamically added coins with details such as icon, name, balance, price, change, and allocation, showcasing the functionality of the coin component.', "Adding a new coin, such as 'CPT token', resulted in its successful display on the dashboard. The addition of a new coin, 'CPT token', with specified details like balance, price, and change, successfully resulted in its display on the dashboard, demonstrating the dynamic functionality."]}], 'duration': 1070.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks3074568.jpg', 'highlights': ['The completed table displays dynamically added coins with details.', "The addition of a new coin, 'CPT token', with specified details like balance, price, and change, successfully resulted in its display on the dashboard, demonstrating the dynamic functionality.", 'The chapter demonstrates building a coin component for a dashboard, including passing coin information, displaying coin details, and styling components.', 'The process involves adding rows to the portfolio table and specifying the content for each row, such as name, balance, price, and allocation.', 'The chapter details the process of styling React components, such as using flex properties to create separation and importing optimized images using next image.', 'The discussion includes the usage of primary and secondary styling for text elements in the React components.', 'The transcript explains the mapping process of a coin list in React, including the iteration through each coin and the display of coin names and icons.', 'Creating a wrapper to hold everything together and adding content inside the wrapper.', 'Styling the portfolio table and its components, including ensuring good width and styling the table row and table item.', 'Implementing the main component and adding the portfolio inside the wrapper of the main component.']}, {'end': 5077.643, 'segs': [{'end': 4240.487, 'src': 'embed', 'start': 4206.055, 'weight': 2, 'content': [{'end': 4208.736, 'text': 'I wanted to take up, you know, pretty much my viewport height.', 'start': 4206.055, 'duration': 2.681}, {'end': 4214.299, 'text': 'I want to have a certain border right to create this like separation, right?', 'start': 4209.817, 'duration': 4.482}, {'end': 4218.502, 'text': 'So, for example, right over here, you see that all right.', 'start': 4214.319, 'duration': 4.183}, {'end': 4228.451, 'text': "so creating that and then i'm just calculating it to be, you know, basically just to the side and not take up the whole whole thing, so to speak,", 'start': 4218.502, 'duration': 9.949}, {'end': 4232.314, 'text': 'okay, cool, the next step, what i need to do is i need to give it a padding.', 'start': 4228.451, 'duration': 3.863}, {'end': 4240.487, 'text': "so i'm going to give it that padding and then i'm just simply going to close this off like this Cool.", 'start': 4232.314, 'duration': 8.173}], 'summary': 'Viewport height taken up with border and padding added for separation.', 'duration': 34.432, 'max_score': 4206.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks4206055.jpg'}, {'end': 4333.721, 'src': 'embed', 'start': 4305.799, 'weight': 5, 'content': [{'end': 4310.061, 'text': "so, for example, when i hover over, you can see that there's a border radius around it.", 'start': 4305.799, 'duration': 4.262}, {'end': 4314.923, 'text': "i don't know if you can notice that, but it's like pretty, you know.", 'start': 4310.061, 'duration': 4.862}, {'end': 4316.103, 'text': 'let me zoom in here.', 'start': 4314.923, 'duration': 1.18}, {'end': 4317.744, 'text': 'you should be able to see it right there.', 'start': 4316.103, 'duration': 1.641}, {'end': 4320.666, 'text': 'see that border radius all the way right there, right.', 'start': 4317.744, 'duration': 2.922}, {'end': 4321.726, 'text': "so that's that styling.", 'start': 4320.666, 'duration': 1.06}, {'end': 4325.317, 'text': 'Cool, okay.', 'start': 4324.056, 'duration': 1.261}, {'end': 4331.32, 'text': 'And then the background color changes on hover, right? So this is what we want, that functionality right there.', 'start': 4326.297, 'duration': 5.023}, {'end': 4333.721, 'text': "Okay, so that's why we added that line of code.", 'start': 4331.34, 'duration': 2.381}], 'summary': 'Demonstrated border radius and background color change on hover for styling.', 'duration': 27.922, 'max_score': 4305.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks4305799.jpg'}, {'end': 4448.114, 'src': 'embed', 'start': 4419.707, 'weight': 0, 'content': [{'end': 4425.912, 'text': "So I'm gonna go to my dashboard and in here, right underneath the wrapper here, I'm gonna add in my sidebar.", 'start': 4419.707, 'duration': 6.205}, {'end': 4433.118, 'text': "So we'll do sidebar like this, save, and let's go to our app and let's see if it shows up.", 'start': 4425.932, 'duration': 7.186}, {'end': 4438.883, 'text': 'Okay, every time I fall for this, import styled from styled components.', 'start': 4433.618, 'duration': 5.265}, {'end': 4442.806, 'text': "Let's hit save, let's refresh.", 'start': 4441.365, 'duration': 1.441}, {'end': 4448.114, 'text': 'Okay, construct image, please use the new operator.', 'start': 4445.111, 'duration': 3.003}], 'summary': 'Adding sidebar to dashboard, encountering code errors', 'duration': 28.407, 'max_score': 4419.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks4419707.jpg'}, {'end': 4804.487, 'src': 'embed', 'start': 4781.097, 'weight': 1, 'content': [{'end': 4789.24, 'text': "So what we're going to do is we're going to go inside of our main and instead of making the overflow scroll, I'm going to make it hidden.", 'start': 4781.097, 'duration': 8.143}, {'end': 4796.497, 'text': "So now the scroll bars for the table are gone, right? So they don't show up anywhere.", 'start': 4790.669, 'duration': 5.828}, {'end': 4797.478, 'text': "So that's good.", 'start': 4796.517, 'duration': 0.961}, {'end': 4804.487, 'text': "And then we'll try to see if we can make these scroll bars at the bottom disappear as well, actually, because that's not nice right?", 'start': 4798.139, 'duration': 6.348}], 'summary': 'Changing overflow to hidden removes scroll bars, improving visual appearance.', 'duration': 23.39, 'max_score': 4781.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks4781097.jpg'}, {'end': 4852.793, 'src': 'embed', 'start': 4827.074, 'weight': 4, 'content': [{'end': 4834.64, 'text': "Now, before we work on any more like big front end stuff, for example, there's a few things that we gotta add.", 'start': 4827.074, 'duration': 7.566}, {'end': 4839.003, 'text': 'I wanna start adding in some third web and web three stuff as well.', 'start': 4834.76, 'duration': 4.243}, {'end': 4845.888, 'text': "So for example, up here, I want to say, the wallet is connected and who it's connected to.", 'start': 4839.423, 'duration': 6.465}, {'end': 4852.793, 'text': 'So I wanna add that to the app, just like how in our app right here, I can see wallet connected and it tells me the address.', 'start': 4845.968, 'duration': 6.825}], 'summary': 'Plan to incorporate web3 features for wallet connectivity in the app.', 'duration': 25.719, 'max_score': 4827.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks4827074.jpg'}], 'start': 4145.76, 'title': 'Building and styling components', 'summary': 'Covers building a sidebar component, creating and styling a dashboard sidebar, and adding styling and functionality for displaying a connected web three wallet address in an app.', 'chapters': [{'end': 4365.812, 'start': 4145.76, 'title': 'Building sidebar component', 'summary': 'Highlights the process of building a sidebar component, emphasizing the approach of quickly constructing the mvp and then optimizing it, in order to enhance functionality and styling.', 'duration': 220.052, 'highlights': ['The chapter emphasizes the approach of quickly constructing the MVP and then optimizing it, in order to enhance functionality and styling.', "The speaker discusses the process of creating a sidebar component, focusing on defining the wrapper's styling, logo container, nav item container, and nav icon.", 'The speaker details the styling of the sidebar component, including specifying the height, border, padding, logo properties, and nav item appearance on hover.']}, {'end': 4825.352, 'start': 4365.892, 'title': 'Creating and styling sidebar for dashboard', 'summary': 'Details the process of creating and styling a sidebar for a dashboard, including adding a logo, sidebar, nav items, and addressing styling issues, resulting in the dashboard starting to resemble the intended design.', 'duration': 459.46, 'highlights': ['Creating the Sidebar and Adding Logo The speaker creates a wrapper to contain the sidebar and adds a logo container with the Coinbase logo, successfully displaying the sidebar and logo, achieving the intended design.', 'Styling the Navbar and Adding Nav Items The speaker styles the navbar and adds nav items by importing them from the static folder, enabling the navbar to show up and the nav items to be mapped and displayed successfully.', 'Improving Dashboard Styling The speaker improves the dashboard styling by wrapping it in content, resulting in a better appearance, and addresses issues with scroll bars, achieving a cleaner and more polished look for the dashboard.']}, {'end': 5077.643, 'start': 4827.074, 'title': 'Web three wallet connection styling', 'summary': 'Involves adding styling and functionality to display the connected web three wallet address in an app, with a focus on creating a wallet link, displaying wallet connection status, and handling wallet address display and updates.', 'duration': 250.569, 'highlights': ['Styling the wallet link and wallet connection status The chapter involves adding styling to the wallet link and displaying the wallet connection status in the app, providing visibility of the connected web three wallet.', 'Handling the wallet address display and updates The process includes displaying the wallet address with the first seven letters followed by three dots and the remaining characters, ensuring the accurate representation of the connected web three wallet address.', 'Resolving errors related to wallet address display The chapter addresses and resolves errors related to displaying the wallet address, including issues with lowercase and uppercase letters and ensuring the proper passing of the wallet address through props.']}], 'duration': 931.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks4145760.jpg', 'highlights': ['The chapter emphasizes the approach of quickly constructing the MVP and then optimizing it, in order to enhance functionality and styling.', 'The speaker details the styling of the sidebar component, including specifying the height, border, padding, logo properties, and nav item appearance on hover.', 'Creating the Sidebar and Adding Logo The speaker creates a wrapper to contain the sidebar and adds a logo container with the Coinbase logo, successfully displaying the sidebar and logo, achieving the intended design.', 'Improving Dashboard Styling The speaker improves the dashboard styling by wrapping it in content, resulting in a better appearance, and addresses issues with scroll bars, achieving a cleaner and more polished look for the dashboard.', 'Handling the wallet address display and updates The process includes displaying the wallet address with the first seven letters followed by three dots and the remaining characters, ensuring the accurate representation of the connected web three wallet address.', 'Styling the wallet link and wallet connection status The chapter involves adding styling to the wallet link and displaying the wallet connection status in the app, providing visibility of the connected web three wallet.']}, {'end': 6145.559, 'segs': [{'end': 5142.7, 'src': 'embed', 'start': 5100.622, 'weight': 0, 'content': [{'end': 5107.365, 'text': 'So for example, when I choose it, we want it to turn blue, just like this, how I choose this here, it turns blue and it stays blue.', 'start': 5100.622, 'duration': 6.743}, {'end': 5110.686, 'text': "So for this, you're gonna need to actually keep track of state.", 'start': 5108.185, 'duration': 2.501}, {'end': 5112.507, 'text': "So let's go and update that real quick.", 'start': 5110.706, 'duration': 1.801}, {'end': 5115.208, 'text': 'And what we need to do is we need to keep track of state.', 'start': 5113.007, 'duration': 2.201}, {'end': 5116.649, 'text': "So I'm gonna paste this here.", 'start': 5115.228, 'duration': 1.421}, {'end': 5126.153, 'text': "And basically what I'm saying is hey, the active icon and set active icon and then the default state is gonna be whatever the initial title is,", 'start': 5116.949, 'duration': 9.204}, {'end': 5129.358, 'text': 'because In the start I want assets to be blue.', 'start': 5126.153, 'duration': 3.205}, {'end': 5130.721, 'text': "That's essentially what it's saying.", 'start': 5129.518, 'duration': 1.203}, {'end': 5132.104, 'text': 'So make the zeroth one.', 'start': 5130.941, 'duration': 1.163}, {'end': 5139.038, 'text': 'And then we need to import useState as well actually from React.', 'start': 5134.876, 'duration': 4.162}, {'end': 5140.299, 'text': "So let's go ahead and do that.", 'start': 5139.058, 'duration': 1.241}, {'end': 5142.7, 'text': 'Now we are using useState.', 'start': 5140.939, 'duration': 1.761}], 'summary': 'Using usestate to keep track of state and turn assets blue in react.', 'duration': 42.078, 'max_score': 5100.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks5100622.jpg'}, {'end': 5589.206, 'src': 'embed', 'start': 5557.648, 'weight': 4, 'content': [{'end': 5560.89, 'text': "And then I'm gonna put my wrapper right there.", 'start': 5557.648, 'duration': 3.242}, {'end': 5563.892, 'text': "Let's end the wrapper here like so.", 'start': 5561.45, 'duration': 2.442}, {'end': 5567.517, 'text': 'All right.', 'start': 5567.197, 'duration': 0.32}, {'end': 5571.278, 'text': "And then inside of this wrapper, I'm going to add a line.", 'start': 5568.037, 'duration': 3.241}, {'end': 5576.481, 'text': 'And that line is the line that you see in our completed app right here.', 'start': 5572.179, 'duration': 4.302}, {'end': 5578.662, 'text': 'You see this app, this line right there.', 'start': 5576.541, 'duration': 2.121}, {'end': 5580.883, 'text': "So we're just kind of hard coding that line.", 'start': 5579.062, 'duration': 1.821}, {'end': 5582.864, 'text': 'Again, you can add it in.', 'start': 5581.383, 'duration': 1.481}, {'end': 5584.384, 'text': "That's an extra challenge for you.", 'start': 5582.924, 'duration': 1.46}, {'end': 5589.206, 'text': "But remember that then it's just going to make this app all front end base and we'll never get to the back end part.", 'start': 5584.464, 'duration': 4.742}], 'summary': 'Creating a wrapper and hard-coding a line in the app to avoid making it all front end-based.', 'duration': 31.558, 'max_score': 5557.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks5557648.jpg'}, {'end': 5801.598, 'src': 'heatmap', 'start': 5638.179, 'weight': 0.756, 'content': [{'end': 5645.798, 'text': 'This is just a style that line what its point radius should be, point hit radius, all of that.', 'start': 5638.179, 'duration': 7.619}, {'end': 5649.959, 'text': 'And then you just plop in just some dummy data in there.', 'start': 5645.918, 'duration': 4.041}, {'end': 5650.58, 'text': "That's it.", 'start': 5650.139, 'duration': 0.441}, {'end': 5652.4, 'text': 'That creates our balance chart.', 'start': 5650.84, 'duration': 1.56}, {'end': 5655.801, 'text': 'And then all we need to do is actually go ahead and use that balance chart.', 'start': 5652.58, 'duration': 3.221}, {'end': 5663.383, 'text': "So we're gonna go ahead in our portfolio and inside of our portfolio, I'm going to import this.", 'start': 5656.181, 'duration': 7.202}, {'end': 5672.01, 'text': "We're gonna say import balance chart from balance chart and can't resolve chart.js.", 'start': 5663.403, 'duration': 8.607}, {'end': 5674.271, 'text': 'Just had to kill the server and restart it.', 'start': 5672.09, 'duration': 2.181}, {'end': 5675.392, 'text': "So that's all I did here.", 'start': 5674.351, 'duration': 1.041}, {'end': 5677.073, 'text': 'Kill the server, restarted it.', 'start': 5675.552, 'duration': 1.521}, {'end': 5678.674, 'text': 'All right, right here.', 'start': 5677.093, 'duration': 1.581}, {'end': 5681.697, 'text': 'And it looks like it is good to go.', 'start': 5679.115, 'duration': 2.582}, {'end': 5684.198, 'text': 'So I imported it now.', 'start': 5682.737, 'duration': 1.461}, {'end': 5687.501, 'text': 'Now we just have to use it.', 'start': 5684.539, 'duration': 2.962}, {'end': 5698.36, 'text': "So all we need to do here is right under where I'm showing Let's see, where's a good place to add it for now.", 'start': 5688.161, 'duration': 10.199}, {'end': 5701.443, 'text': "Let's just add it right above the portfolio table.", 'start': 5698.44, 'duration': 3.003}, {'end': 5705.926, 'text': "So I'll go right above the portfolio table and we'll add it right there.", 'start': 5701.963, 'duration': 3.963}, {'end': 5708.048, 'text': "Let's see if it works for us.", 'start': 5706.487, 'duration': 1.561}, {'end': 5710.691, 'text': "So it's having errors here.", 'start': 5709.129, 'duration': 1.562}, {'end': 5717.677, 'text': "So let's go back to our balance chart and that's because we need to destructure here.", 'start': 5711.091, 'duration': 6.586}, {'end': 5722.381, 'text': "So we're going to destructure data and destructure options.", 'start': 5717.717, 'duration': 4.664}, {'end': 5730.163, 'text': 'We just need to actually create options.', 'start': 5727.52, 'duration': 2.643}, {'end': 5731.224, 'text': "That's all we need to do.", 'start': 5730.363, 'duration': 0.861}, {'end': 5733.126, 'text': "So let's go right here, right underneath this.", 'start': 5731.304, 'duration': 1.822}, {'end': 5740.053, 'text': "And we're going to do const options and I'm going to say plugins legend.", 'start': 5734.147, 'duration': 5.906}, {'end': 5745.378, 'text': "And then we're going to say display false, just like that.", 'start': 5740.393, 'duration': 4.985}, {'end': 5747.781, 'text': 'And now options is defined.', 'start': 5746.039, 'duration': 1.742}, {'end': 5750.949, 'text': 'All right.', 'start': 5750.689, 'duration': 0.26}, {'end': 5758.155, 'text': 'So now one magical thing we have to do here is just go import chart from chart GS slash auto.', 'start': 5750.969, 'duration': 7.186}, {'end': 5767.383, 'text': "And even though we're not using it in our code, it actually gets rid of that error we were having and that there's our chart.", 'start': 5758.936, 'duration': 8.447}, {'end': 5769.745, 'text': 'Okay Beautiful.', 'start': 5767.403, 'duration': 2.342}, {'end': 5774.308, 'text': "So now we're getting our chart and we need to add a couple of things there.", 'start': 5769.845, 'duration': 4.463}, {'end': 5777.511, 'text': "So we're going to go inside of our portfolio.", 'start': 5775.269, 'duration': 2.242}, {'end': 5780.985, 'text': 'And we just need to create a couple more things.', 'start': 5779.324, 'duration': 1.661}, {'end': 5783.787, 'text': 'So for example, we need to create a chart styling.', 'start': 5781.025, 'duration': 2.762}, {'end': 5790.591, 'text': "So I'm going to go right here underneath the content and we need to create and style our chart.", 'start': 5784.567, 'duration': 6.024}, {'end': 5792.953, 'text': 'Put a border around it.', 'start': 5791.672, 'duration': 1.281}, {'end': 5793.933, 'text': "That's what one thing.", 'start': 5793.173, 'duration': 0.76}, {'end': 5801.598, 'text': "So this will put a border around it like this, like a square, kind of like how there's one around the data table, the assets table.", 'start': 5793.993, 'duration': 7.605}], 'summary': 'Imported and implemented balance chart, resolved errors, and styled the chart.', 'duration': 163.419, 'max_score': 5638.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks5638179.jpg'}], 'start': 5077.663, 'title': 'Building wallet, styling updates, promos, and balance chart', 'summary': 'Demonstrates connecting a wallet, implementing styling updates, adding promos, and a balance chart to the application. it includes using usestate to turn selected items blue, creating promos and balance chart components with specific styling, and preparing for blockchain integration.', 'chapters': [{'end': 5197.093, 'start': 5077.663, 'title': 'Connecting wallet and styling updates', 'summary': 'Demonstrates connecting a wallet and implementing styling updates, including keeping track of state and using usestate to turn selected items blue upon click.', 'duration': 119.43, 'highlights': ['The chapter demonstrates connecting a wallet and implementing styling updates, including keeping track of state and using useState to turn selected items blue upon click.', 'The authentication process is shown to be successful, with the wallet code being pulled as expected.', 'The implementation involves keeping track of state and using useState to turn selected items blue upon click.']}, {'end': 5628.315, 'start': 5198.703, 'title': 'Building promos and balance chart', 'summary': 'Illustrates the process of adding promos and a balance chart to the application, including creating a promos component with specific styling and adding a balance chart component with hard-coded data, as well as installing the react chart js package.', 'duration': 429.612, 'highlights': ["Creating a promos component with specific styling and adding title, description, and placeholder for offer cards. The speaker demonstrates creating a promos component named promos.js with specific styling, including a title 'yield earned', a description and a placeholder for offer cards.", "Adding the promos to the main component and resolving import and styling issues. The speaker adds the promos to the main component, encounters an error 'Promos is not defined', resolves it by importing styles from styled components, and successfully displays the cards with the required styling.", "Creating a balance chart component and installing the React Chart JS package. The speaker creates a balance chart component named balance chart.js, adds an empty wrapper, and installs the React Chart JS package using the command 'yarn add React chart JS - two'."]}, {'end': 6145.559, 'start': 5629.195, 'title': 'Building and implementing balance chart', 'summary': 'Details the process of building and implementing a balance chart into a portfolio, fixing errors, styling the chart, and preparing for blockchain integration, iterating through tokens in the sanity database, and calculating the total value of the assets in usd.', 'duration': 516.364, 'highlights': ['The process of building and implementing a balance chart into a portfolio, including importing, resolving errors, and styling the chart.', 'The iteration through tokens in the sanity database to retrieve the quantities of different tokens and calculating the total value of the assets in USD.', 'The adjustment of the frontend to enable scrolling and the encouragement for further customization of the chart.']}], 'duration': 1067.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks5077663.jpg', 'highlights': ['Demonstrates connecting a wallet and implementing styling updates, including using useState to turn selected items blue upon click.', 'Creating a promos component with specific styling and adding title, description, and placeholder for offer cards.', 'Creating a balance chart component and installing the React Chart JS package.', 'The process of building and implementing a balance chart into a portfolio, including importing, resolving errors, and styling the chart.', 'The iteration through tokens in the sanity database to retrieve the quantities of different tokens and calculating the total value of the assets in USD.']}, {'end': 8247.37, 'segs': [{'end': 6266.404, 'src': 'embed', 'start': 6216.955, 'weight': 1, 'content': [{'end': 6218.216, 'text': "That's how you write GraphQL.", 'start': 6216.955, 'duration': 1.261}, {'end': 6219.678, 'text': 'A little bit similar to this.', 'start': 6218.697, 'duration': 0.981}, {'end': 6221.94, 'text': 'Also give me the USD price.', 'start': 6220.338, 'duration': 1.602}, {'end': 6225.423, 'text': "Let's make sure to put commas there because otherwise it'll choke.", 'start': 6222.821, 'duration': 2.602}, {'end': 6226.965, 'text': 'So put commas.', 'start': 6226.144, 'duration': 0.821}, {'end': 6231.748, 'text': "Now it's giving me the name of each and the USD price of each.", 'start': 6228.905, 'duration': 2.843}, {'end': 6234.07, 'text': "Perfect, that's exactly what we're looking for.", 'start': 6231.948, 'duration': 2.122}, {'end': 6238.994, 'text': "Well, give me the contract address while you're at it, because that's gonna be necessary.", 'start': 6234.55, 'duration': 4.444}, {'end': 6242.217, 'text': 'Cool, so I got my contract address now.', 'start': 6240.275, 'duration': 1.942}, {'end': 6245.36, 'text': 'Give me the symbol and the logo as well.', 'start': 6242.617, 'duration': 2.743}, {'end': 6251.853, 'text': 'All right, so now I have the logo image, which is this URL.', 'start': 6246.909, 'duration': 4.944}, {'end': 6254.295, 'text': 'I got my contract address.', 'start': 6252.733, 'duration': 1.562}, {'end': 6258.077, 'text': "I got that it's Ethereum, the symbol that it's ETH and USD price.", 'start': 6254.615, 'duration': 3.462}, {'end': 6260.739, 'text': "And it's doing that, giving it to me for all of them.", 'start': 6258.598, 'duration': 2.141}, {'end': 6266.404, 'text': "So I get back a result of three, right? And it's a array of objects.", 'start': 6260.82, 'duration': 5.584}], 'summary': 'Transcript includes obtaining usd price, contract address, symbol, and logo for ethereum with a result of three objects.', 'duration': 49.449, 'max_score': 6216.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks6216955.jpg'}, {'end': 6364.217, 'src': 'embed', 'start': 6324.694, 'weight': 8, 'content': [{'end': 6325.355, 'text': "Let's import it.", 'start': 6324.694, 'duration': 0.661}, {'end': 6328.655, 'text': 'All right.', 'start': 6328.295, 'duration': 0.36}, {'end': 6332.557, 'text': 'And the dependency for this one is going to be an empty array.', 'start': 6328.735, 'duration': 3.822}, {'end': 6335.017, 'text': 'So just nothing.', 'start': 6332.697, 'duration': 2.32}, {'end': 6344.94, 'text': "And I'm going to basically say this, this is going to be an async function.", 'start': 6336.478, 'duration': 8.462}, {'end': 6349.708, 'text': "And here's what we're going to do.", 'start': 6348.607, 'duration': 1.101}, {'end': 6351.849, 'text': "So we'll do a try catch here.", 'start': 6350.168, 'duration': 1.681}, {'end': 6358.854, 'text': "So I'm just going to say const coins and we'll await fetch.", 'start': 6351.949, 'duration': 6.905}, {'end': 6364.217, 'text': "So double quote it just because there's a single quote inside of it.", 'start': 6359.934, 'duration': 4.283}], 'summary': 'Imported dependency as an empty array for an async function to fetch coins.', 'duration': 39.523, 'max_score': 6324.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks6324694.jpg'}, {'end': 6715.701, 'src': 'heatmap', 'start': 6555.327, 'weight': 0.786, 'content': [{'end': 6558.649, 'text': 'I shut down that server and I refresh and it still worked.', 'start': 6555.327, 'duration': 3.322}, {'end': 6562.03, 'text': 'So even without the studio running, it works.', 'start': 6559.349, 'duration': 2.681}, {'end': 6563.011, 'text': "So it's freaking great.", 'start': 6562.091, 'duration': 0.92}, {'end': 6571.706, 'text': "Awesome. So now that we're getting our sanity tokens, and before we continue further,", 'start': 6564.719, 'duration': 6.987}, {'end': 6576.41, 'text': "let's just make sure we have one more thing installed that we're going to need, which is going to be ether.", 'start': 6571.706, 'duration': 4.704}, {'end': 6578.612, 'text': "So let's just do yarn add ethers.", 'start': 6576.45, 'duration': 2.162}, {'end': 6582.095, 'text': 'This is going to be an important package that we need.', 'start': 6579.293, 'duration': 2.802}, {'end': 6584.478, 'text': "Let's just make sure that we're spelling it right.", 'start': 6582.156, 'duration': 2.322}, {'end': 6585.619, 'text': "That's right.", 'start': 6585.098, 'duration': 0.521}, {'end': 6586.78, 'text': 'And hit enter.', 'start': 6585.979, 'duration': 0.801}, {'end': 6592, 'text': "This is going to make sure that we're good to go in terms of the next steps that we're going to be doing.", 'start': 6587.537, 'duration': 4.463}, {'end': 6595.403, 'text': "Now let's import ethers at the top here.", 'start': 6592.761, 'duration': 2.642}, {'end': 6602.128, 'text': "So we're going to do import and I'm going to say ethers.", 'start': 6596.423, 'duration': 5.705}, {'end': 6605.07, 'text': "I'll do from ethers.", 'start': 6603.449, 'duration': 1.621}, {'end': 6607.673, 'text': 'like this.', 'start': 6607.233, 'duration': 0.44}, {'end': 6611.377, 'text': "And then also let's import third web SDK.", 'start': 6608.735, 'duration': 2.642}, {'end': 6619.305, 'text': "So I'm going to say third web SDK from third web SDK, just like that, because we're going to need all of these now.", 'start': 6611.517, 'duration': 7.788}, {'end': 6620.875, 'text': 'All right.', 'start': 6620.655, 'duration': 0.22}, {'end': 6625.197, 'text': 'Now that we have third web SDK and ethers kind of added to this.', 'start': 6620.915, 'duration': 4.282}, {'end': 6632.461, 'text': "Now what we're going to do is let's create the third web SDK and this is how we'll do it.", 'start': 6625.398, 'duration': 7.063}, {'end': 6636.844, 'text': "So let's go all over the top here and we'll just initialize it right here.", 'start': 6632.521, 'duration': 4.323}, {'end': 6641.926, 'text': "That's like our very first thing to just create our third web SDK.", 'start': 6637.584, 'duration': 4.342}, {'end': 6646.669, 'text': 'Now this key over here, we just want to say meta mask.', 'start': 6642.026, 'duration': 4.643}, {'end': 6649.504, 'text': 'meta mask here.', 'start': 6648.484, 'duration': 1.02}, {'end': 6651.065, 'text': "Let's go to our end file.", 'start': 6649.664, 'duration': 1.401}, {'end': 6653.545, 'text': 'And what did we call it? Yes, we did.', 'start': 6651.865, 'duration': 1.68}, {'end': 6655.185, 'text': 'Okay, perfect.', 'start': 6654.445, 'duration': 0.74}, {'end': 6659.166, 'text': 'So this creates our SDK that we can then use at any time.', 'start': 6655.686, 'duration': 3.48}, {'end': 6662.707, 'text': 'Okay, perfect.', 'start': 6660.747, 'duration': 1.96}, {'end': 6664.808, 'text': 'And this URL here is going to be important.', 'start': 6662.727, 'duration': 2.081}, {'end': 6667.988, 'text': 'Just so you know where I got this URL from.', 'start': 6665.148, 'duration': 2.84}, {'end': 6670.609, 'text': 'go to your meta mask.', 'start': 6667.988, 'duration': 2.621}, {'end': 6674.816, 'text': 'click this button right here.', 'start': 6670.609, 'duration': 4.207}, {'end': 6678.178, 'text': 'go into settings inside of your settings.', 'start': 6674.816, 'duration': 3.362}, {'end': 6680.959, 'text': 'go all the way down to networks.', 'start': 6678.178, 'duration': 2.781}, {'end': 6682.559, 'text': 'go to Rinkeby test network.', 'start': 6680.959, 'duration': 1.6}, {'end': 6689.542, 'text': 'click that arrow and it will show you here you can see the chain ID is four right?', 'start': 6682.559, 'duration': 6.983}, {'end': 6691.122, 'text': "And here's our ether scan.", 'start': 6689.702, 'duration': 1.42}, {'end': 6695.624, 'text': 'And also it will show you your RPC URL that you need.', 'start': 6692.143, 'duration': 3.481}, {'end': 6699.385, 'text': 'So take that URL, paste that bad boy right there.', 'start': 6695.804, 'duration': 3.581}, {'end': 6701.566, 'text': "That's what you need to make this happen.", 'start': 6699.985, 'duration': 1.581}, {'end': 6706.915, 'text': "Cool, so we got this SDK up and running, that's good.", 'start': 6702.932, 'duration': 3.983}, {'end': 6715.701, 'text': "Now what we need to do is let's go ahead and update this, ignore that real quick.", 'start': 6707.475, 'duration': 8.226}], 'summary': 'Installed ethers and third web sdk, initialized third web sdk with meta mask and rinkeby test network url.', 'duration': 160.374, 'max_score': 6555.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks6555327.jpg'}, {'end': 6867.502, 'src': 'embed', 'start': 6842.424, 'weight': 2, 'content': [{'end': 6847.927, 'text': "And you can see that each of the tokens contract address, I'm actually getting right here at the bottom right, as you can see.", 'start': 6842.424, 'duration': 5.503}, {'end': 6853.696, 'text': 'What I need to do is if I feed that to the SDK right?', 'start': 6849.793, 'duration': 3.903}, {'end': 6860.94, 'text': 'So if I do SDK dot, get token module, so the third web SDK.', 'start': 6853.716, 'duration': 7.224}, {'end': 6865.303, 'text': "you'll see that it'll help me actually get the token from third web.", 'start': 6860.94, 'duration': 4.363}, {'end': 6867.502, 'text': 'Right there.', 'start': 6867.102, 'duration': 0.4}], 'summary': 'Sdk retrieves token information from contract address for third web.', 'duration': 25.078, 'max_score': 6842.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks6842424.jpg'}, {'end': 7106.165, 'src': 'embed', 'start': 7076.627, 'weight': 10, 'content': [{'end': 7082.35, 'text': 'We will need our sanity tokens and we will need our wallet address right now.', 'start': 7076.627, 'duration': 5.723}, {'end': 7087.672, 'text': "Let's just console log all of these things to see if we're actually getting them sanity.", 'start': 7082.37, 'duration': 5.302}, {'end': 7091.554, 'text': "Let's go here.", 'start': 7090.734, 'duration': 0.82}, {'end': 7097.237, 'text': "Sanity tokens and we'll say wallet address.", 'start': 7092.175, 'duration': 5.062}, {'end': 7100.783, 'text': "And let's make sure we're getting it.", 'start': 7099.202, 'duration': 1.581}, {'end': 7106.165, 'text': "So I'm gonna just put a gun emoji right there and see if we're getting this.", 'start': 7100.803, 'duration': 5.362}], 'summary': 'Testing for receipt of sanity tokens and wallet address.', 'duration': 29.538, 'max_score': 7076.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks7076627.jpg'}, {'end': 7633.076, 'src': 'embed', 'start': 7593.813, 'weight': 7, 'content': [{'end': 7598.195, 'text': "So I'm gonna say const token to USD like this.", 'start': 7593.813, 'duration': 4.382}, {'end': 7610.28, 'text': "And then I'm simply gonna say for token of Sanity tokens.", 'start': 7599.255, 'duration': 11.025}, {'end': 7612.101, 'text': 'This is like a modern for loop.', 'start': 7610.34, 'duration': 1.761}, {'end': 7615.143, 'text': 'So use this one instead of dot for each.', 'start': 7612.201, 'duration': 2.942}, {'end': 7619.905, 'text': 'And we will simply say token to USD.', 'start': 7616.763, 'duration': 3.142}, {'end': 7631.395, 'text': "And then we'll, we'll do token dot contract address, and then we'll do token to USD price.", 'start': 7621.809, 'duration': 9.586}, {'end': 7633.076, 'text': 'So can wrap it in number.', 'start': 7631.415, 'duration': 1.661}], 'summary': "Using 'const token to usd' to convert sanity tokens, modern for loop replaces 'dot for each', and wrapping the result in a number.", 'duration': 39.263, 'max_score': 7593.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks7593813.jpg'}, {'end': 7948.179, 'src': 'embed', 'start': 7919.01, 'weight': 4, 'content': [{'end': 7923.591, 'text': "And we'll bring this, put it inside of the use effect here, and then we'll just call it.", 'start': 7919.01, 'duration': 4.581}, {'end': 7927.293, 'text': "So I'll say calculate total balance, just like that.", 'start': 7923.711, 'duration': 3.582}, {'end': 7928.793, 'text': "And we'll say return.", 'start': 7927.633, 'duration': 1.16}, {'end': 7936.671, 'text': "And let's just make sure that our console log works.", 'start': 7932.328, 'duration': 4.343}, {'end': 7942.135, 'text': "I'll do console log and we'll do total balance as total and we'll refresh.", 'start': 7936.791, 'duration': 5.344}, {'end': 7945.778, 'text': "And let's see if we actually get what we're looking for.", 'start': 7943.756, 'duration': 2.022}, {'end': 7948.179, 'text': 'Total balance says zero.', 'start': 7946.798, 'duration': 1.381}], 'summary': 'Implemented calculate total balance function, which returned a total balance of zero.', 'duration': 29.169, 'max_score': 7919.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks7919010.jpg'}, {'end': 8060.985, 'src': 'embed', 'start': 8035.155, 'weight': 0, 'content': [{'end': 8039.337, 'text': "And what's nice about this way of writing it is that it's very performant.", 'start': 8035.155, 'duration': 4.182}, {'end': 8043.538, 'text': 'And it will run every it will essentially run in parallel.', 'start': 8040.077, 'duration': 3.461}, {'end': 8047.28, 'text': "I'll execute all of the things at the same exact time.", 'start': 8044.619, 'duration': 2.661}, {'end': 8051.602, 'text': "So it's essentially how you want your asynchronous code to be right.", 'start': 8047.32, 'duration': 4.282}, {'end': 8057.944, 'text': 'And then the last thing we want to do here is we want to return the sum.', 'start': 8052.382, 'duration': 5.562}, {'end': 8060.985, 'text': "So first of all, let's actually just give this a try.", 'start': 8058.444, 'duration': 2.541}], 'summary': 'Efficient parallel execution for better asynchronous code, aiming to return the sum.', 'duration': 25.83, 'max_score': 8035.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks8035155.jpg'}], 'start': 6145.559, 'title': 'Integrating apis, setting up sdks, state management, and portfolio calculation', 'summary': 'Covers integrating the sanity api, setting up ethers and third web sdk, managing state and data passing, performing currency conversion, and calculating a portfolio balance of $345,000 involving 7 bitcoin, 15 ethereum, and $6,800 of solana.', 'chapters': [{'end': 6563.011, 'start': 6145.559, 'title': 'Sanity api integration', 'summary': 'Discusses integrating the sanity api into the application, utilizing a vision query to fetch coin data, and updating the state with the fetched result, achieving a fast response time of 13 milliseconds and highlighting the ease of use and reliability of the sanity api.', 'duration': 417.452, 'highlights': ['Vision query used to fetch coin data, achieving a response time of 13 milliseconds and obtaining contract addresses, symbols, logos, and USD prices, demonstrating the efficiency of the API.', "Utilization of the fetched result to update the state variable 'sanity tokens,' showcasing the practical application of the fetched data and its seamless integration into the application.", 'Ease of use and reliability of the Sanity API highlighted, emphasizing its simplicity in executing API requests and its capability to function even when the studio is offline.']}, {'end': 6941.181, 'start': 6564.719, 'title': 'Setting up ethers and third web sdk', 'summary': 'Explains the process of setting up ethers and third web sdk, including adding the necessary packages, initializing the sdk, obtaining the rpc url for the rinkeby test network, and updating the function to handle sanity and third web tokens.', 'duration': 376.462, 'highlights': ['Initializing ethers and Third Web SDK The tutorial explains the process of adding ethers and Third Web SDK to the project, ensuring the necessary packages are installed and initialized.', 'Obtaining RPC URL for Rinkeby test network The tutorial provides guidance on obtaining the RPC URL for the Rinkeby test network from MetaMask settings, highlighting the chain ID and Ether scan information.', 'Updating function to handle Sanity and Third Web tokens The function is updated to handle the retrieval and processing of Sanity and Third Web tokens, including setting state variables and mapping token contract addresses to obtain Third Web tokens.']}, {'end': 7414.663, 'start': 6941.281, 'title': 'State management and data passing', 'summary': 'Discusses lifting state up to provide access to tokens throughout the app, passing data between components, and using third web tokens to access ethereum balance, in the context of react development.', 'duration': 473.382, 'highlights': ['Lifting state up to provide access to tokens throughout the app The chapter discusses lifting state up from the portfolio to the dashboard to provide access to tokens throughout the entire app, ensuring components have access to all necessary data.', 'Passing data between components The process of passing data between components, specifically providing the wallet address, sanity tokens, and third web tokens to the header and main components to ensure access to all necessary data is detailed.', 'Using third web tokens to access Ethereum balance The usage of third web tokens to access Ethereum balance, including retrieving the balance of Ethereum in the wallet and displaying the value as 15 ETH, is explained.']}, {'end': 7706.633, 'start': 7415.203, 'title': 'Currency conversion and total calculation', 'summary': 'Discusses the process of converting different tokens into usd values using a lookup table and multiplying them by corresponding prices, ultimately totaling up the money for different tokens.', 'duration': 291.43, 'highlights': ['The process involves converting different tokens into USD values using a lookup table and multiplying them by corresponding prices, such as converting 15 ETH into $46,000 by multiplying it by 3,100.', "Creating a lookup table for crypto prices to USD conversion, such as associating Bitcoin's contract address with its USD price and using this table for price conversions.", 'The need to total up all the money by calculating the USD values of different tokens in order to obtain the overall sum.']}, {'end': 8247.37, 'start': 7707.413, 'title': 'Calculating total portfolio balance', 'summary': 'Explains how to create a function to calculate the total portfolio balance by fetching the token balances using the wallet address, converting them to usd, and summing them up, resulting in a portfolio balance of $345,000, which includes 7 bitcoin, 15 ethereum, and $6,800 of solana.', 'duration': 539.957, 'highlights': ['The function calculates the total portfolio balance by fetching token balances using the wallet address and converting them to USD. This function sums up the token balances fetched using the wallet address and converts them to USD, resulting in a total portfolio balance.', 'The portfolio balance is $345,000, consisting of 7 Bitcoin, 15 Ethereum, and $6,800 of Solana. The calculated portfolio balance amounts to $345,000, which includes 7 Bitcoin, 15 Ethereum, and $6,800 of Solana.', 'The use of reduce method to sum up the token balances and convert them to USD. The reduce method is used to sum up the token balances and convert them to USD, providing an efficient way to calculate the portfolio balance.']}], 'duration': 2101.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks6145559.jpg', 'highlights': ['Vision query fetches coin data with 13ms response time, showcasing API efficiency', 'Sanity tokens state variable updated with fetched result, demonstrating practical application', 'Sanity API highlighted for ease of use and reliability in executing requests', 'Initializing ethers and Third Web SDK, ensuring necessary packages are installed', 'Guidance on obtaining RPC URL for Rinkeby test network from MetaMask settings', 'Function updated to handle retrieval and processing of Sanity and Third Web tokens', 'Lifting state up from portfolio to dashboard to provide access to tokens throughout the app', 'Detailed process of passing data between components to ensure access to necessary data', 'Usage of third web tokens to access Ethereum balance, explained with example', 'Process of converting different tokens into USD values using a lookup table detailed', 'Creation of a lookup table for crypto prices to USD conversion explained', 'Totaling up all the money by calculating the USD values of different tokens emphasized', 'Function calculating total portfolio balance by fetching token balances and converting to USD', 'Portfolio balance of $345,000, consisting of 7 Bitcoin, 15 Ethereum, and $6,800 of Solana', 'Efficient use of reduce method to sum up token balances and convert them to USD']}, {'end': 10799.159, 'segs': [{'end': 8961.024, 'src': 'embed', 'start': 8931.828, 'weight': 4, 'content': [{'end': 8934.45, 'text': 'So our option styling is going to be like this.', 'start': 8931.828, 'duration': 2.622}, {'end': 8935.511, 'text': 'All right.', 'start': 8934.47, 'duration': 1.041}, {'end': 8942.076, 'text': "And this will make it so on hover, there's actually a background color change that's happening.", 'start': 8936.351, 'duration': 5.725}, {'end': 8943.597, 'text': 'So watch this.', 'start': 8942.557, 'duration': 1.04}, {'end': 8948.501, 'text': "When I click send and receive, when I hover over, it's a little hard to see right now.", 'start': 8943.717, 'duration': 4.784}, {'end': 8951.384, 'text': "So we're going to make it so it's easier to see and it actually works.", 'start': 8948.562, 'duration': 2.822}, {'end': 8959.042, 'text': 'And, um, I think what might help is actually adding up, wrapping, wrapping those in option.', 'start': 8953.434, 'duration': 5.608}, {'end': 8961.024, 'text': "So let's go ahead and do that now.", 'start': 8959.622, 'duration': 1.402}], 'summary': 'Improving option styling with hover background color change for better visibility and functionality.', 'duration': 29.196, 'max_score': 8931.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks8931828.jpg'}, {'end': 9417.15, 'src': 'embed', 'start': 9390.598, 'weight': 2, 'content': [{'end': 9397.982, 'text': 'Perfect I want to change this from H2 that to selected modal and whatever the action type is.', 'start': 9390.598, 'duration': 7.384}, {'end': 9401.182, 'text': 'So by default, the action type is send.', 'start': 9399.141, 'duration': 2.041}, {'end': 9404.864, 'text': "All right, so that's why it's writing send.", 'start': 9401.962, 'duration': 2.902}, {'end': 9408.766, 'text': 'Now, if I choose receive, notice that it becomes receive.', 'start': 9405.524, 'duration': 3.242}, {'end': 9412.588, 'text': "Okay, so it looks like it's working correctly.", 'start': 9409.727, 'duration': 2.861}, {'end': 9417.15, 'text': 'And my selected modal function is able to choose the modals correctly as well.', 'start': 9413.128, 'duration': 4.022}], 'summary': 'Changing action type to selected modal, default is send, working correctly.', 'duration': 26.552, 'max_score': 9390.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks9390598.jpg'}, {'end': 9538.821, 'src': 'embed', 'start': 9509.156, 'weight': 1, 'content': [{'end': 9511.859, 'text': "So that's what we got here, right? We got this Yowza showing up.", 'start': 9509.156, 'duration': 2.703}, {'end': 9517.366, 'text': "That's great, because this transfer is working and we're gonna need to keep replacing these components,", 'start': 9512.14, 'duration': 5.226}, {'end': 9521.571, 'text': "because for this we need to have multiple cases and we'll work on them later.", 'start': 9517.366, 'duration': 4.205}, {'end': 9522.992, 'text': "For now, let's just work on our transfer.", 'start': 9521.591, 'duration': 1.401}, {'end': 9525.496, 'text': "Alrighty So let's work on our styling.", 'start': 9523.655, 'duration': 1.841}, {'end': 9528.177, 'text': "First things first, we're going to make a wrapper.", 'start': 9525.616, 'duration': 2.561}, {'end': 9529.957, 'text': 'All right.', 'start': 9528.197, 'duration': 1.76}, {'end': 9534.199, 'text': "And we're going to import style components.", 'start': 9531.098, 'duration': 3.101}, {'end': 9538.821, 'text': "We're going to say styled from style components, just like this refresh.", 'start': 9534.219, 'duration': 4.602}], 'summary': 'Working on transfer components and styling with style components.', 'duration': 29.665, 'max_score': 9509.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks9509156.jpg'}, {'end': 10103.459, 'src': 'embed', 'start': 10073.077, 'weight': 0, 'content': [{'end': 10077.86, 'text': "Right underneath this icon, I'm going to add in my recipient.", 'start': 10073.077, 'duration': 4.783}, {'end': 10080.768, 'text': 'All right.', 'start': 10080.387, 'duration': 0.381}, {'end': 10083.632, 'text': 'And this recipient can be a self-closing tag.', 'start': 10081.028, 'duration': 2.604}, {'end': 10090.682, 'text': "And for props, we're going to give it a placeholder and placeholder just going to say address.", 'start': 10084.893, 'duration': 5.789}, {'end': 10096.41, 'text': 'So you can now see that address is showing up right there.', 'start': 10092.104, 'duration': 4.306}, {'end': 10103.459, 'text': "And so placeholders of one thing I need, let's add in a couple of more here.", 'start': 10098.676, 'duration': 4.783}], 'summary': 'Adding recipient with placeholder for address and multiple placeholders.', 'duration': 30.382, 'max_score': 10073.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks10073077.jpg'}, {'end': 10202.154, 'src': 'embed', 'start': 10169.202, 'weight': 3, 'content': [{'end': 10173.625, 'text': "It's kind of hard to see actually, but it just did a very subtle little tiny change.", 'start': 10169.202, 'duration': 4.423}, {'end': 10173.965, 'text': 'All right.', 'start': 10173.725, 'duration': 0.24}, {'end': 10176.047, 'text': "Let's work on our other row.", 'start': 10174.105, 'duration': 1.942}, {'end': 10179.53, 'text': 'Okay So we built our first row, which was this field.', 'start': 10176.067, 'duration': 3.463}, {'end': 10181.271, 'text': "Now let's work on our second row.", 'start': 10179.77, 'duration': 1.501}, {'end': 10192.625, 'text': "And the field name will be pay with, and then we'll do coin select list.", 'start': 10183.716, 'duration': 8.909}, {'end': 10201.013, 'text': "So this will give us a list of coins to select from let's do coin select list.", 'start': 10193.766, 'duration': 7.247}, {'end': 10202.154, 'text': 'I misspelled it earlier.', 'start': 10201.133, 'duration': 1.021}], 'summary': 'Building rows and fields, correcting misspelled coin select list', 'duration': 32.952, 'max_score': 10169.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks10169202.jpg'}], 'start': 8247.53, 'title': 'Developing portfolio functionality', 'summary': 'Covers updating portfolio balance, building model for send and receive functionality, adding styling options and modals, and implementing token transfer modal, involving specific functions, react modal, conditional rendering, and prop drilling for accurate rendering and seamless user experience.', 'chapters': [{'end': 8349.877, 'start': 8247.53, 'title': 'Portfolio balance update', 'summary': 'Demonstrates the process of updating the portfolio balance using data from the blockchain, including the use of specific functions and the need to wait for certain data to be loaded for accurate rendering.', 'duration': 102.347, 'highlights': ['The portfolio balance is updated using the data from the blockchain, ensuring accurate rendering and functionality.', 'Functions such as set wallet balance and locale string are utilized in updating the portfolio balance.', 'The need to wait for the loading of certain data such as third web tokens and Sanity to ensure accurate rendering and functionality.']}, {'end': 8906.158, 'start': 8351.147, 'title': 'Building model for send and receive functionality', 'summary': 'Details the process of building a model for send and receive functionality, including adding react modal, creating a transfer modal component, implementing routing, and styling the modal, resulting in the successful display of the send and receive functionality.', 'duration': 555.011, 'highlights': ['The process of building a model for send and receive functionality, including adding React modal, creating a transfer modal component, implementing routing, and styling the modal. process of building a model, adding React modal, creating transfer modal component, implementing routing, and styling modal', 'The use of router to change routes when hitting send and receive, and the significance of query parameters in opening and closing the modal. use of router, significance of query parameters in modal functionality', 'Implementation of a workaround for making a modal work in a Next.js app, including the use of anchor tags and links for modal functionality. implementation of workaround for modal functionality, use of anchor tags and links', 'Styling the modal using custom styles, adding a background overlay, and centering the modal for a visually appealing display. styling the modal, adding background overlay, centering the modal', 'Creating a selector to center the text and choices inside the modal using display flex properties. creating a selector, centering text and choices using display flex']}, {'end': 9869.811, 'start': 8906.158, 'title': 'Styling options and building modals', 'summary': 'Details the process of adding styling to options and building multiple modals for different components, including the process of using state, creating different types of modals, and styling input fields, with the demonstration of on-click functionality and conditional rendering.', 'duration': 963.653, 'highlights': ['The process of adding styling to options and building multiple modals for different components is detailed. The speaker explains the process of adding styling to options, including hover effects and background color changes, and building multiple modals for different components, such as send, receive, and transfer.', 'The demonstration of using state for managing the selected and unselected styles is explained. The speaker demonstrates the use of state for managing the selected and unselected styles, including the use of useState and setAction to update the state based on user interaction, resulting in dynamic styling changes.', 'The process of styling input fields and demonstrating on-click functionality is shown. The speaker explains the process of styling input fields, including the use of style components, and demonstrates on-click functionality for updating the state and rendering different modals based on user interaction.']}, {'end': 10402.533, 'start': 9870.211, 'title': 'Styling for transfer form', 'summary': 'Details the process of building the styling for the transfer form, including adding dividers, styling rows, icons, input fields, and buttons, and making them dynamic for a seamless user experience.', 'duration': 532.322, 'highlights': ['Process of building the styling The chapter details the process of building the styling for the transfer form, including adding dividers, styling rows, icons, input fields, and buttons, and making them dynamic for a seamless user experience.', "Adding styling for recipient and continue button The transcript mentions adding styling for recipient input field with placeholder 'address' and a continue button, ensuring their proper visual representation and functionality.", 'Dynamic development of input fields and buttons The speaker discusses the need to make the input fields and buttons dynamic, indicating the intention to make them responsive to user interactions for an improved user experience.', 'Hard-coded elements for initial representation The chapter highlights the use of hard-coded elements for initial representation, emphasizing the importance of making the elements dynamic for future implementation.']}, {'end': 10799.159, 'start': 10403.353, 'title': 'Implementing token transfer modal', 'summary': 'Demonstrates the process of implementing a token transfer modal, including the prop drilling process and utilizing useeffect hook, to pass essential information like selected token, third web tokens, and wallet address.', 'duration': 395.806, 'highlights': ['Implementing the prop drilling process for passing essential information like selected token, third web tokens, and wallet address to the transfer modal. The transcript outlines the process of prop drilling to pass essential information like selected token, third web tokens, and wallet address to the transfer modal, ensuring access to all necessary information.', 'Utilizing the useEffect hook to ensure the proper functionality of the selected token. The chapter explains the use of the useEffect hook to ensure the proper functionality of the selected token, indicating how it is essential for updating the selected token.', 'Demonstrating the process of accessing and passing necessary information to the transfer modal, including the selected token, third web tokens, and wallet address. It demonstrates the process of accessing and passing necessary information like the selected token, third web tokens, and wallet address to the transfer modal, ensuring that the transfer modal has access to all required information.']}], 'duration': 2551.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks8247530.jpg', 'highlights': ['The portfolio balance is updated using the data from the blockchain, ensuring accurate rendering and functionality.', 'The process of building a model for send and receive functionality, including adding React modal, creating a transfer modal component, implementing routing, and styling the modal.', 'The process of adding styling to options and building multiple modals for different components is detailed.', 'Process of building the styling for the transfer form, including adding dividers, styling rows, icons, input fields, and buttons, and making them dynamic for a seamless user experience.', 'Implementing the prop drilling process for passing essential information like selected token, third web tokens, and wallet address to the transfer modal.']}, {'end': 11606.202, 'segs': [{'end': 10831.073, 'src': 'embed', 'start': 10800.04, 'weight': 1, 'content': [{'end': 10807.514, 'text': "Perfect Now selected token is working because it's sending, I can see that right here at the bottom.", 'start': 10800.04, 'duration': 7.474}, {'end': 10815.881, 'text': 'So if I put a little gun emoji or a flame emoji, come on emoji work.', 'start': 10807.994, 'duration': 7.887}, {'end': 10817.022, 'text': 'There we go.', 'start': 10816.562, 'duration': 0.46}, {'end': 10822.627, 'text': "You can see that it, this is working and it's showing up at the bottom right there.", 'start': 10818.364, 'duration': 4.263}, {'end': 10827.592, 'text': "And it's showing us exactly which token, which token we have.", 'start': 10823.949, 'duration': 3.643}, {'end': 10831.073, 'text': "Now, if you're wondering Hey, why isn't it showing up for you?", 'start': 10828.092, 'duration': 2.981}], 'summary': 'Selected token is working; emojis are displayed. system shows exact token used.', 'duration': 31.033, 'max_score': 10800.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks10800040.jpg'}, {'end': 11036.884, 'src': 'embed', 'start': 10973.956, 'weight': 0, 'content': [{'end': 10974.717, 'text': "We'll say image.", 'start': 10973.956, 'duration': 0.761}, {'end': 10979.501, 'text': 'You know, you could say, yeah, image URL set.', 'start': 10976.318, 'duration': 3.183}, {'end': 10987.237, 'text': "image URL, we'll say use state started off with null.", 'start': 10981.377, 'duration': 5.86}, {'end': 10995.134, 'text': 'And then once this happened, we will say set image URL to URL just like this.', 'start': 10988.891, 'duration': 6.243}, {'end': 10998.116, 'text': "And now I don't need these anymore.", 'start': 10995.454, 'duration': 2.662}, {'end': 11005.64, 'text': 'Remember the hack when you wanna do this, right? Refresh and you gotta start from the homepage.', 'start': 10998.576, 'duration': 7.064}, {'end': 11007.941, 'text': 'You gotta basically get out of the modal.', 'start': 11006.44, 'duration': 1.501}, {'end': 11013.344, 'text': 'So once you get out of the modal and then you hit send and receive, now it should work.', 'start': 11008.081, 'duration': 5.263}, {'end': 11019.666, 'text': "So let's go all the way down here and instead of this hard coded Brad Pitt thing,", 'start': 11014.384, 'duration': 5.282}, {'end': 11024.389, 'text': "we're going to replace this and we're just going to say image URL just like that.", 'start': 11019.666, 'duration': 4.723}, {'end': 11032.612, 'text': "Again, let's go back to our home page and now it's there.", 'start': 11026.29, 'duration': 6.322}, {'end': 11033.253, 'text': 'Check it out.', 'start': 11032.672, 'duration': 0.581}, {'end': 11035.943, 'text': 'Woo-hoo, we did it, guys.', 'start': 11034.161, 'duration': 1.782}, {'end': 11036.884, 'text': 'Look at that.', 'start': 11036.043, 'duration': 0.841}], 'summary': 'Setting and updating image url using react hooks, eliminating hard-coded content', 'duration': 62.928, 'max_score': 10973.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks10973956.jpg'}, {'end': 11398.089, 'src': 'embed', 'start': 11344.342, 'weight': 4, 'content': [{'end': 11351.683, 'text': 'Every time our active third web token changes our active third token, the rep token being this one that you select here.', 'start': 11344.342, 'duration': 7.341}, {'end': 11355.099, 'text': 'okay, cool.', 'start': 11353.217, 'duration': 1.882}, {'end': 11358.803, 'text': "so let's go and see if we're getting our balance.", 'start': 11355.099, 'duration': 3.704}, {'end': 11369.554, 'text': "so i'm going to hit inspect here and we're just going to console log this and in my console log right here let's just so console log, balance dot,", 'start': 11358.803, 'duration': 10.751}, {'end': 11372.738, 'text': "balance dot, display value and let's see if we get anything.", 'start': 11369.554, 'duration': 3.184}, {'end': 11380.484, 'text': "And you can see that I'm actually getting back 15 and that's the exact amount of Ethereum that I have in my third web.", 'start': 11374.582, 'duration': 5.902}, {'end': 11384.365, 'text': 'So if I go here and I go to my Ethereum, you can see I have 15 ETH.', 'start': 11381.124, 'duration': 3.241}, {'end': 11389.847, 'text': "So that looks like it's working perfectly.", 'start': 11385.345, 'duration': 4.502}, {'end': 11391.147, 'text': 'All right.', 'start': 11389.867, 'duration': 1.28}, {'end': 11394.128, 'text': "And let's remove that console log now.", 'start': 11392.127, 'duration': 2.001}, {'end': 11398.089, 'text': 'Now, all we need to do is just update that dynamically.', 'start': 11394.848, 'duration': 3.241}], 'summary': 'Successfully retrieved 15 eth balance using the active third web token.', 'duration': 53.747, 'max_score': 11344.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks11344342.jpg'}], 'start': 10800.04, 'title': 'Token management', 'summary': "Covers token image url building using 'sanity/image url' package and implementing third-party token functionality, encompassing tracking active tokens, dynamically updating token details, and enabling crypto transfer with detailed steps and examples.", 'chapters': [{'end': 11036.884, 'start': 10800.04, 'title': 'Token image url building', 'summary': "Demonstrates the process of building an image url for a selected token, emphasizing the requirement to access the main page to enable the functionality and the use of 'sanity/image url' package for building the url.", 'duration': 236.844, 'highlights': ['The process of building the image URL for the selected token is demonstrated, emphasizing the importance of accessing the main page to enable the functionality. Importance of accessing the main page for the functionality, process of building the image URL for the selected token.', "The usage of 'sanity/image URL' package for building the image URL is explained, with a recommendation to install the package using 'yarn add sanity/image URL'. Explanation of using 'sanity/image URL' package, recommendation for package installation using 'yarn add sanity/image URL'.", "The process of updating the image URL when the selected token changes is illustrated, utilizing the 'useEffect' hook and state management to achieve the functionality. Illustration of updating the image URL on selected token change, utilization of 'useEffect' hook and state management for functionality."]}, {'end': 11606.202, 'start': 11036.964, 'title': 'Implementing third-party token functionality', 'summary': 'Discusses implementing third-party token functionality, including tracking active tokens, dynamically updating token details, and enabling crypto transfer with detailed steps and examples.', 'duration': 569.238, 'highlights': ['Implementing dynamic token selection and retrieval from the Third Web The speaker discusses implementing dynamic token selection and retrieval from the Third Web, enabling users to select and retrieve token details to match their needs.', 'Updating token details from the sanity database The chapter explains updating token details from the sanity database, using selected token properties like symbol and name to dynamically display token information.', 'Fetching and displaying token balance dynamically The transcript details the process of fetching and displaying token balance dynamically, including using async functions and dependencies to update the balance on selection changes.', "Enabling crypto transfer with Third Web's transfer method The chapter demonstrates enabling crypto transfer using Third Web's transfer method, including specifying recipient address, amount, and handling 18-decimal token requirements for Ethereum."]}], 'duration': 806.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks10800040.jpg', 'highlights': ["Enabling crypto transfer with Third Web's transfer method, including specifying recipient address, amount, and handling 18-decimal token requirements for Ethereum.", 'Fetching and displaying token balance dynamically, including using async functions and dependencies to update the balance on selection changes.', 'Updating token details from the sanity database, using selected token properties like symbol and name to dynamically display token information.', 'Implementing dynamic token selection and retrieval from the Third Web, enabling users to select and retrieve token details to match their needs.', "The process of updating the image URL when the selected token changes is illustrated, utilizing the 'useEffect' hook and state management to achieve the functionality.", "The usage of 'sanity/image URL' package for building the image URL is explained, with a recommendation to install the package using 'yarn add sanity/image URL'.", 'The process of building the image URL for the selected token is demonstrated, emphasizing the importance of accessing the main page to enable the functionality.']}, {'end': 13397.747, 'segs': [{'end': 11759.464, 'src': 'embed', 'start': 11732.535, 'weight': 8, 'content': [{'end': 11735.999, 'text': 'Smash that like button, break it, and turn it blue.', 'start': 11732.535, 'duration': 3.464}, {'end': 11741.144, 'text': 'And comment and let me know how freaking awesome was that because we just set the first blockchain transaction.', 'start': 11736.319, 'duration': 4.825}, {'end': 11743.005, 'text': 'Yo Okay.', 'start': 11742.044, 'duration': 0.961}, {'end': 11746.298, 'text': "Man, I'm sorry.", 'start': 11745.518, 'duration': 0.78}, {'end': 11747.539, 'text': "I'm just so hyped about this.", 'start': 11746.318, 'duration': 1.221}, {'end': 11748.599, 'text': 'This is freaking exciting.', 'start': 11747.559, 'duration': 1.04}, {'end': 11749.56, 'text': 'All right.', 'start': 11749.32, 'duration': 0.24}, {'end': 11753.121, 'text': 'So we got our transaction working and we got the ETH.', 'start': 11749.6, 'duration': 3.521}, {'end': 11754.342, 'text': "I can't get over it.", 'start': 11753.601, 'duration': 0.741}, {'end': 11759.464, 'text': "We got the ETH, even though we built this app and I've seen this multiple times, it was just so freaking exciting.", 'start': 11754.462, 'duration': 5.002}], 'summary': 'First blockchain transaction set, excitement over successful eth acquisition.', 'duration': 26.929, 'max_score': 11732.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks11732535.jpg'}, {'end': 12081.472, 'src': 'embed', 'start': 11990.856, 'weight': 0, 'content': [{'end': 11992.857, 'text': "So I'll need access to all of these things.", 'start': 11990.856, 'duration': 2.001}, {'end': 11997.84, 'text': "So let's just make sure our Coinbase coin selector is working.", 'start': 11994.298, 'duration': 3.542}, {'end': 12006.785, 'text': "So for now I'm just going to say H2 and we'll say, yo, and let's just go ahead and add a coin selector in the right place.", 'start': 11997.92, 'duration': 8.865}, {'end': 12014.809, 'text': "So in our transfer modal, let's import it.", 'start': 12011.061, 'duration': 3.748}, {'end': 12019.78, 'text': "So we're going to say import coin selector from coin selector.", 'start': 12014.849, 'duration': 4.931}, {'end': 12028.119, 'text': "And then we're gonna do when somebody selects, if the action is select.", 'start': 12023.138, 'duration': 4.981}, {'end': 12033.821, 'text': 'So for example, on send, do this on receive, do this.', 'start': 12028.159, 'duration': 5.662}, {'end': 12035.661, 'text': 'We wanna create another case.', 'start': 12034.441, 'duration': 1.22}, {'end': 12042.523, 'text': 'And this case is going to be case where we have select.', 'start': 12037.141, 'duration': 5.382}, {'end': 12045.503, 'text': 'All right.', 'start': 12045.063, 'duration': 0.44}, {'end': 12051.705, 'text': 'So what happens there? So when this happens, we need to return our coin selector.', 'start': 12046.364, 'duration': 5.341}, {'end': 12054.945, 'text': 'Make it a self-closing tag.', 'start': 12053.624, 'duration': 1.321}, {'end': 12057.387, 'text': 'And we need to give it a bunch of things.', 'start': 12055.445, 'duration': 1.942}, {'end': 12059.428, 'text': "So we're going to give it set action.", 'start': 12057.927, 'duration': 1.501}, {'end': 12061.91, 'text': "We're going to give it a selected token.", 'start': 12059.448, 'duration': 2.462}, {'end': 12065.173, 'text': "We're going to give it the ability to set selected token.", 'start': 12061.93, 'duration': 3.243}, {'end': 12067.134, 'text': "We're going to give it sanity tokens.", 'start': 12065.533, 'duration': 1.601}, {'end': 12069.536, 'text': "We're going to give it third web tokens.", 'start': 12067.655, 'duration': 1.881}, {'end': 12071.357, 'text': "And we're going to give it the wallet address.", 'start': 12069.836, 'duration': 1.521}, {'end': 12074.32, 'text': 'GitHub Copilot is so freaking amazing.', 'start': 12071.798, 'duration': 2.522}, {'end': 12075.981, 'text': 'It auto-completes all that.', 'start': 12074.72, 'duration': 1.261}, {'end': 12081.472, 'text': "Now let's go to our coin selector and let's just go yo.", 'start': 12077.489, 'duration': 3.983}], 'summary': 'Configuring coinbase coin selector in transfer modal for token selection and wallet address input.', 'duration': 90.616, 'max_score': 11990.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks11990856.jpg'}, {'end': 12175.061, 'src': 'embed', 'start': 12139.276, 'weight': 5, 'content': [{'end': 12143.419, 'text': 'Wrapper is gonna be pretty basic, nothing in the styling of that.', 'start': 12139.276, 'duration': 4.143}, {'end': 12148.321, 'text': "We're gonna need a title and then we're gonna need our coin list.", 'start': 12144.099, 'duration': 4.222}, {'end': 12150.522, 'text': "So we're gonna need to style our coin list.", 'start': 12148.942, 'duration': 1.58}, {'end': 12161.813, 'text': "Perfect And now let's wrap this inside of a wrapper, wrapper, click it.", 'start': 12150.782, 'duration': 11.031}, {'end': 12163.474, 'text': 'Boom Shows up nicely.', 'start': 12161.933, 'duration': 1.541}, {'end': 12170.878, 'text': "Cool We're going to replace this and instead put title here.", 'start': 12164.195, 'duration': 6.683}, {'end': 12175.061, 'text': "And in my title, I'm going to say select asset.", 'start': 12170.898, 'duration': 4.163}], 'summary': 'Basic wrapper with title and coin list for select asset.', 'duration': 35.785, 'max_score': 12139.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks12139276.jpg'}, {'end': 12451.353, 'src': 'embed', 'start': 12423.177, 'weight': 3, 'content': [{'end': 12425.52, 'text': "So let's add the styling for a main.", 'start': 12423.177, 'duration': 2.343}, {'end': 12430.986, 'text': "Let's remove all of this.", 'start': 12429.044, 'duration': 1.942}, {'end': 12433.989, 'text': "Oh yeah, style components is where we're getting the error from.", 'start': 12431.226, 'duration': 2.763}, {'end': 12436.852, 'text': 'Import style from style components.', 'start': 12435.03, 'duration': 1.822}, {'end': 12439.034, 'text': "Let's do a full refresh on this.", 'start': 12437.493, 'duration': 1.541}, {'end': 12443.828, 'text': "And of course the app is going to break because we're going directly to that link.", 'start': 12440.686, 'duration': 3.142}, {'end': 12451.353, 'text': "So let's go to the homepage first, open up our send and receive, open up this right there and put it on the side here.", 'start': 12443.848, 'duration': 7.505}], 'summary': 'Fixing styling error and navigating to homepage for app stability.', 'duration': 28.176, 'max_score': 12423.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks12423177.jpg'}, {'end': 13035.016, 'src': 'embed', 'start': 13002.838, 'weight': 2, 'content': [{'end': 13003.879, 'text': "Let's pick Bitcoin.", 'start': 13002.838, 'duration': 1.041}, {'end': 13005.42, 'text': 'And look at that.', 'start': 13004.36, 'duration': 1.06}, {'end': 13007.522, 'text': 'It even updated this with Bitcoin.', 'start': 13005.461, 'duration': 2.061}, {'end': 13010.064, 'text': 'Yo, that is nice.', 'start': 13007.722, 'duration': 2.342}, {'end': 13014.368, 'text': 'When I go here, pick Solana, it has updated that with Solana.', 'start': 13010.905, 'duration': 3.463}, {'end': 13017.25, 'text': 'And it has fetched my ETH correctly.', 'start': 13015.188, 'duration': 2.062}, {'end': 13019.452, 'text': "Let's see if it fetches my Bitcoin.", 'start': 13017.711, 'duration': 1.741}, {'end': 13021.474, 'text': 'It fetched my Bitcoin correctly.', 'start': 13019.592, 'duration': 1.882}, {'end': 13026.201, 'text': "Let's see if it fetches my Solana and it fetched my Solana correctly.", 'start': 13022.074, 'duration': 4.127}, {'end': 13029.807, 'text': "Yo, this is crazy, right? That's crazy.", 'start': 13026.301, 'duration': 3.506}, {'end': 13035.016, 'text': "Now we're just going to need to update this too because this is hard coded and we need to make this dynamic as well.", 'start': 13029.887, 'duration': 5.129}], 'summary': 'The system successfully fetched and updated bitcoin, solana, and eth accurately, demonstrating its dynamic functionality.', 'duration': 32.178, 'max_score': 13002.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks13002838.jpg'}], 'start': 11606.862, 'title': 'Blockchain integration', 'summary': 'Covers successfully sending blockchain transactions, enhancing coin selection features, managing blockchain tokens, and integrating third web token functionality, showcasing the power and value of blockchain integration for web 3 applications.', 'chapters': [{'end': 11871.803, 'start': 11606.862, 'title': 'Blockchain transaction success', 'summary': "Explains the process of successfully sending a blockchain transaction using a specific amount of cryptocurrency and verifying its receipt, resulting in a dynamic update of the user's portfolio balance, while also emphasizing the excitement and satisfaction of achieving this milestone.", 'duration': 264.941, 'highlights': ['The function to send crypto is attached to the continue button, using a specific amount and recipient, resulting in a successful blockchain transaction and a console log confirmation. By attaching the send crypto function to the continue button and specifying the amount and recipient, a successful blockchain transaction is executed, as confirmed by the console log.', "The successful blockchain transaction results in the dynamic update of the user's portfolio balance, accurately reflecting the sent cryptocurrency amount and demonstrating the functionality of the application. Following the successful blockchain transaction, the user's portfolio balance dynamically updates to reflect the sent cryptocurrency amount, showcasing the application's functional accuracy.", "The chapter concludes with the author's expression of excitement and satisfaction in achieving the successful blockchain transaction milestone, emphasizing the interactive engagement by encouraging likes, comments, and sharing of the accomplishment. The author enthusiastically expresses excitement and satisfaction in achieving the successful blockchain transaction milestone, encouraging interactive engagement by seeking likes, comments, and sharing of the accomplishment."]}, {'end': 12283.109, 'start': 11872.463, 'title': 'Enhancing coin selection feature', 'summary': 'Focuses on enhancing the coin selection feature, integrating a component called coin selector, and creating a coin item component to display multiple coins and enable coin selection within the transfer modal.', 'duration': 410.646, 'highlights': ["The chapter focuses on enhancing the coin selection feature The chapter begins with the goal of allowing the selection of multiple coins and capitalizing the 'send' and 'receive' letters in the transfer modal.", 'Integrating a component called coin selector The chapter introduces the creation of a new component called coin selector to facilitate the selection of tokens, including importing necessary modules like useState and styled components.', 'Creating a coin item component to display multiple coins and enable coin selection within the transfer modal The chapter details the creation of a coin item component to display and enable the selection of multiple coins with the ability to style and handle click events for each coin.']}, {'end': 12616.123, 'start': 12283.129, 'title': 'Blockchain token management', 'summary': 'Covers the process of extracting the key, defining the sender, selected token, and actions, as well as styling and state management for a blockchain token management system.', 'duration': 332.994, 'highlights': ['The process involves extracting the key, defining the sender, selected token, and actions for blockchain token management.', 'Styling components and states are implemented for the blockchain token management system.', 'The chapter also covers the use of useEffect hook for accessing information on page render and creating a function for getting the balance.']}, {'end': 13397.747, 'start': 12616.303, 'title': 'Building third web token integration', 'summary': 'Details the development process of integrating third web token functionality into an application, including creating functions for retrieving token balances and building image urls, resolving issues related to defined state and effects, updating selected tokens and actions, and testing and successfully sending and receiving different cryptocurrencies, showcasing the power and value of blockchain integration for web 3 applications.', 'duration': 781.444, 'highlights': ['Successfully sending and receiving different cryptocurrencies, showcasing the power and value of blockchain integration for web 3 applications. Successful integration of blockchain functionality; demonstration of sending and receiving multiple cryptocurrencies.', 'Resolving issues related to defined state and effects, ensuring smooth application functionality. Debugging and resolving issues related to defined state and effects for smooth application operation.', 'Creating functions for retrieving token balances and building image URLs, enhancing application functionality. Development of functions for retrieving token balances and building image URLs to enhance application capabilities.', 'Updating selected tokens and actions dynamically, improving user interaction and experience. Dynamic updating of selected tokens and actions for enhanced user interaction and experience.']}], 'duration': 1790.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks11606862.jpg', 'highlights': ["The successful blockchain transaction results in the dynamic update of the user's portfolio balance, accurately reflecting the sent cryptocurrency amount and demonstrating the functionality of the application.", 'The function to send crypto is attached to the continue button, using a specific amount and recipient, resulting in a successful blockchain transaction and a console log confirmation.', "The chapter concludes with the author's expression of excitement and satisfaction in achieving the successful blockchain transaction milestone, emphasizing the interactive engagement by encouraging likes, comments, and sharing of the accomplishment.", "The chapter focuses on enhancing the coin selection feature by allowing the selection of multiple coins and capitalizing the 'send' and 'receive' letters in the transfer modal.", 'Integrating a component called coin selector to facilitate the selection of tokens, including importing necessary modules like useState and styled components.', 'Creating a coin item component to display multiple coins and enable coin selection within the transfer modal.', 'Successfully sending and receiving different cryptocurrencies, showcasing the power and value of blockchain integration for web 3 applications.', 'Resolving issues related to defined state and effects, ensuring smooth application functionality.', 'Creating functions for retrieving token balances and building image URLs, enhancing application functionality.', 'Updating selected tokens and actions dynamically, improving user interaction and experience.']}, {'end': 15227.953, 'segs': [{'end': 13588.797, 'src': 'embed', 'start': 13531.523, 'weight': 1, 'content': [{'end': 13534.245, 'text': 'And then we see transfer complete right here.', 'start': 13531.523, 'duration': 2.722}, {'end': 13537.006, 'text': 'Now, of course we wanna center it and do all of that.', 'start': 13534.325, 'duration': 2.681}, {'end': 13539.847, 'text': 'And you know what? I like adding loaders.', 'start': 13537.326, 'duration': 2.521}, {'end': 13542.948, 'text': "So let's go ahead and add a loader.", 'start': 13540.207, 'duration': 2.741}, {'end': 13545.749, 'text': "So we'll go to React Loader Spinner.", 'start': 13543.568, 'duration': 2.181}, {'end': 13549.23, 'text': 'I think this should be fairly easy to use.', 'start': 13545.909, 'duration': 3.321}, {'end': 13550.23, 'text': 'Looks simple enough.', 'start': 13549.29, 'duration': 0.94}, {'end': 13551.63, 'text': 'And we can use this.', 'start': 13550.55, 'duration': 1.08}, {'end': 13553.891, 'text': "And it's also really easy to use.", 'start': 13552.27, 'duration': 1.621}, {'end': 13557.632, 'text': "So let's simply go ahead and download this.", 'start': 13554.391, 'duration': 3.241}, {'end': 13563.193, 'text': "So I'm going to do yarn add React Loader Spinner.", 'start': 13558.652, 'duration': 4.541}, {'end': 13566.657, 'text': "And we're gonna paste that right here.", 'start': 13564.455, 'duration': 2.202}, {'end': 13570.761, 'text': 'Oh, yarn add react loader spinner.', 'start': 13566.677, 'duration': 4.084}, {'end': 13571.542, 'text': "I'll just type it in.", 'start': 13570.801, 'duration': 0.741}, {'end': 13573.183, 'text': "So that'll install it.", 'start': 13572.282, 'duration': 0.901}, {'end': 13579.148, 'text': "Now it's telling me I should add this command to the main app.js file.", 'start': 13573.684, 'duration': 5.464}, {'end': 13585.514, 'text': "So let's go to our underscore app.js file and let's add a global level add that.", 'start': 13579.729, 'duration': 5.785}, {'end': 13586.575, 'text': 'So it imports that.', 'start': 13585.574, 'duration': 1.001}, {'end': 13588.797, 'text': 'So our entire app has access to it.', 'start': 13587.136, 'duration': 1.661}], 'summary': 'Added react loader spinner to app for easy use and installation', 'duration': 57.274, 'max_score': 13531.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks13531523.jpg'}, {'end': 14299.359, 'src': 'embed', 'start': 14241.999, 'weight': 0, 'content': [{'end': 14248.306, 'text': "All builder is, is this past this, give it clients and that's, that's builder.", 'start': 14241.999, 'duration': 6.307}, {'end': 14248.626, 'text': "That's it.", 'start': 14248.406, 'duration': 0.22}, {'end': 14251.754, 'text': 'Okay, cool, no worries.', 'start': 14250.134, 'duration': 1.62}, {'end': 14257.036, 'text': "Go to localhost 3000 and then you're gonna hit send and receive.", 'start': 14251.854, 'duration': 5.182}, {'end': 14261.777, 'text': 'All right, then hit receive and ta-da, our QR code is showing up.', 'start': 14258.036, 'duration': 3.741}, {'end': 14268.439, 'text': 'And if you actually took out your phone and scanned it, you will get my exact wallet address that I have right there.', 'start': 14261.817, 'duration': 6.622}, {'end': 14273.301, 'text': 'Okay, perfect, great.', 'start': 14270.8, 'duration': 2.501}, {'end': 14281.347, 'text': 'Now what we need to do is I wanna put a divider here.', 'start': 14273.941, 'duration': 7.406}, {'end': 14286.45, 'text': "So I put a divider underneath this and then underneath that we'll build our row.", 'start': 14281.367, 'duration': 5.083}, {'end': 14288.632, 'text': "So we'll do a coin select list.", 'start': 14286.511, 'duration': 2.121}, {'end': 14292.034, 'text': "And then we're going to do the similar type of coin select list.", 'start': 14289.232, 'duration': 2.802}, {'end': 14298.038, 'text': "It's going to be a self closing tag or actually, no, let's not make it a self closing tag.", 'start': 14292.554, 'duration': 5.484}, {'end': 14299.359, 'text': "Let's do it like this.", 'start': 14298.258, 'duration': 1.101}], 'summary': 'Builder demonstrates sending and receiving qr code for wallet address, adding divider and coin select list.', 'duration': 57.36, 'max_score': 14241.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks14241999.jpg'}, {'end': 14916.756, 'src': 'embed', 'start': 14887.365, 'weight': 2, 'content': [{'end': 14889.046, 'text': "I'm going to say no and hit enter.", 'start': 14887.365, 'duration': 1.681}, {'end': 14895.81, 'text': "It's going to say, what's your project's name? I'm just going to say Coinbase blockchain app because I misspelled it initially.", 'start': 14889.386, 'duration': 6.424}, {'end': 14897.771, 'text': 'So Coinbase blockchain app like that.', 'start': 14895.95, 'duration': 1.821}, {'end': 14901.733, 'text': "In which directory is your code located? It's located right over here.", 'start': 14898.431, 'duration': 3.302}, {'end': 14902.874, 'text': "So I'm just going to hit enter.", 'start': 14901.873, 'duration': 1.001}, {'end': 14907.345, 'text': 'It came unblurry.', 'start': 14906.544, 'duration': 0.801}, {'end': 14910.188, 'text': 'Do you want to override settings? No.', 'start': 14908.646, 'duration': 1.542}, {'end': 14912.15, 'text': "And now it's just deploying it.", 'start': 14910.889, 'duration': 1.261}, {'end': 14912.831, 'text': "That's all.", 'start': 14912.21, 'duration': 0.621}, {'end': 14916.756, 'text': "So let's go ahead and update the private keys for this project.", 'start': 14913.432, 'duration': 3.324}], 'summary': 'Deploying coinbase blockchain app, updating private keys.', 'duration': 29.391, 'max_score': 14887.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks14887365.jpg'}], 'start': 13397.747, 'title': 'Enhancing ui and app deployment', 'summary': 'Covers adding a loader to ui, enhancing transfer status and styling, building qr code and components, and deploying the app with modern tech stack, emphasizing javascript and react mastery and successful blockchain app deployment.', 'chapters': [{'end': 13726.315, 'start': 13397.747, 'title': 'Adding loader to ui', 'summary': "Explains the process of adding a loader to the ui to indicate the transfer progress, enhancing user experience and providing a real-time demonstration of the development process. it also emphasizes the importance of mastering javascript and react by joining the 'profit with react' course.", 'duration': 328.568, 'highlights': ['The process of adding a loader to the UI is explained, enhancing the user experience by providing a visual indication of the transfer progress. The chapter demonstrates the process of adding a loader to the UI to indicate the transfer progress, enhancing the user experience and providing a real-time demonstration of the development process.', "Emphasizing the importance of mastering JavaScript and React by joining the 'Profit with React' course. The chapter encourages the audience to master JavaScript and React by joining the 'Profit with React' course, highlighting the benefits of gaining fundamental understanding and practical skills in building similar projects."]}, {'end': 13952.86, 'start': 13726.536, 'title': 'Ui transfer status and styling', 'summary': 'Discusses enhancing the ui transfer status and styling, including centralizing and styling div elements, updating transfer status messages, and improving the appearance of the receive component.', 'duration': 226.324, 'highlights': ['Enhancing UI transfer status and styling The chapter discusses the process of enhancing the UI transfer status and styling.', 'Centralizing and styling div elements The speaker demonstrates how to centralize and style div elements to improve the visual presentation.', "Updating transfer status messages The process of updating transfer status messages to show 'transfer in progress' and 'transfer complete' is explained.", 'Improving the appearance of the receive component The chapter outlines the steps to improve the appearance of the receive component, including adding a QR code and the ability to copy the ETH address.']}, {'end': 14622.251, 'start': 13953.02, 'title': 'Building qr code and styling components', 'summary': 'Covers building a qr code using the qr server api, implementing styling for various components, and testing the functionality, resulting in successful transfers of cryptocurrency.', 'duration': 669.231, 'highlights': ['Implementing the QR code functionality using the QR server API and specifying the size and data, resulting in the generation of a QR code for the wallet address. QR code size: 250x250, API: QR server, data: wallet address', 'Styling the components including wrapper, content, QR container, divider, row, icon, coin select list, title, address, and copy button, emphasizing the importance of visual presentation in the front end. Multiple components styled for front end presentation', 'Successful completion of cryptocurrency transfers, including sending one soul and one Bitcoin, with real-time balance updates and a seamless transfer process, showcasing the functionality of the implemented features. Transfers: one soul, one Bitcoin, Balance update: real-time']}, {'end': 14839.833, 'start': 14622.251, 'title': 'App deployment and tech stack overview', 'summary': 'Discusses the process of deploying an application using vercel.com and the usage of a modern tech stack including next.js, metamask, and third web for interfacing with blockchain, providing a powerful database and a seamless user experience.', 'duration': 217.582, 'highlights': ['The tech stack includes a powerful database like sanity, interfacing with blockchain using Third Web, and using Next.js for front end and style components, along with MetaMask for app authentication, providing a modern and powerful application.', "The deployment process involves using Vercel.com for hosting the application, running 'yarn build' command, and addressing potential deployment issues such as handling linting errors and managing private keys for deployment.", 'The process of deploying the application is explained, including using Vercel.com for hosting, addressing deployment issues, and utilizing hacks to overcome deployment challenges.', 'The chapter emphasizes the value and reliability of the application, highlighting its seamless functionality, ease of use, and the benefits it brings to the users.']}, {'end': 15227.953, 'start': 14840.013, 'title': 'Blockchain app deployment and testing', 'summary': "Details the deployment and testing process of a blockchain app, including deploying the app using vercel, updating private keys, adding origins for cores, and successfully testing the app's functionality, demonstrating the deployment and successful operation of the blockchain app.", 'duration': 387.94, 'highlights': ["Successfully tested the app's functionality, demonstrating the deployment and successful operation of the blockchain app. The app successfully displayed the wallet, connected to the wallet, updated balances, and executed transactions, confirming the app's successful deployment and operation.", "Deployed the app using Vercel, updating private keys to ensure the deployed version won't break. The deployment of the app using Vercel was successful, and private keys were updated to prevent the deployed version from breaking, ensuring the app's stability.", "Added origins for cores to enable the app to function correctly when deployed. Origins for cores were added to ensure the app would function correctly when deployed, demonstrating proactive measures to maintain the app's functionality."]}], 'duration': 1830.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frCsGK4cKks/pics/frCsGK4cKks13397747.jpg', 'highlights': ["The chapter emphasizes mastering JavaScript and React through the 'Profit with React' course.", 'The deployment process involves using Vercel.com for hosting the application and addressing potential deployment issues.', "The app successfully displayed the wallet, connected to the wallet, updated balances, and executed transactions, confirming the app's successful deployment and operation.", 'The process of adding a loader to the UI is explained, enhancing the user experience by providing a visual indication of the transfer progress.', 'The tech stack includes a powerful database like sanity, interfacing with blockchain using Third Web, and using Next.js for front end and style components, along with MetaMask for app authentication.']}], 'highlights': ['Vision query fetches coin data with 13ms response time, showcasing API efficiency', "The app retrieves and displays the user's token balances from MetaMask, showing four Bitcoins and two Ethereums, and updates the portfolio balance in real-time.", 'The portfolio balance is updated using the data from the blockchain, ensuring accurate rendering and functionality.', 'The process of adding buy and sell buttons to the header and ensuring they are placed within a wrapper and flex box is described, resulting in visually appealing buttons.', 'The completed table displays dynamically added coins with details.', 'Creating custom cryptocurrencies on a test network emphasizing the need for setup and eventual success', 'The chapter emphasizes the approach of quickly constructing the MVP and then optimizing it, in order to enhance functionality and styling.', "Enabling crypto transfer with Third Web's transfer method, including specifying recipient address, amount, and handling 18-decimal token requirements for Ethereum.", 'The process of building a model for send and receive functionality, including adding React modal, creating a transfer modal component, implementing routing, and styling the modal.', "The app is built using Next.js, providing a beautiful tech stack and seamless functionality for wallet connection and asset management, resembling Coinbase's interface."]}