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.