CrossFi Workshop #2
Introduction (5 minutes)
Welcome participants and introduce the workshop's objective: to demonstrate how to connect a frontend application to the CrossFi Chain.
Briefly explain the importance of frontend-backend interaction in blockchain development.
Provide an overview of the tools and libraries that will be used: Ethers.js, Viem, and Thirdweb SDK.
Outline the structure of the workshop: first, a walkthrough of code samples for each library, followed by a live coding session.
Code Samples Demonstration (10 minutes)
1. Ethers.js
Explain what Ethers.js is and its purpose in interacting with Ethereum-based blockchains.
Walk through the provided code sample for connecting to the CrossFi Testnet using Ethers.js.
Highlight key components such as provider initialization and fetching the latest block number.
Emphasize the simplicity and versatility of Ethers.js for blockchain interaction.
2. Viem
Introduce Viem as a TypeScript library for type-safe blockchain interactions.
Demonstrate the code snippet for defining the CrossFi Testnet chain and fetching the latest block number.
Discuss the advantages of using Viem, such as type safety and built-in support for multiple chains.
Compare and contrast Viem with Ethers.js in terms of usage and features.
3. Thirdweb SDK
Present Thirdweb as a developer platform offering tools and SDKs for EVM chains.
Showcase the TypeScript SDK usage example for retrieving wallet balance on the CrossFi Testnet.
Discuss the unique features of Thirdweb SDK, such as contract deployment and integrated wallet functionalities.
Mention any additional resources or documentation available for further exploration.
Live Coding Session (40 minutes)
Engage participants in a live coding session where they follow along to connect a frontend application to the CrossFi Chain using one of the presented libraries (participants can choose based on their preference).
Provide guidance and assistance as needed, addressing any questions or issues that arise during the coding session.
Encourage participants to experiment with different functionalities beyond just fetching the latest block number, such as querying smart contracts or interacting with wallet balances.
Emphasize best practices in frontend-backend integration and error handling.
Conclusion (5 minutes)
Recap the key concepts covered in the workshop, including the use of Ethers.js, Viem, and Thirdweb SDK for frontend-backend interaction.
Encourage participants to continue exploring blockchain development and leveraging the tools introduced in the workshop.
Thank participants for their participation and invite feedback or questions.
Provide information on how participants can access workshop materials and additional resources for further learning.