LogoLogo
  • Introduction
  • Foundation Initiatives and Grants
    • Users
    • Ambassadors
    • Developers
    • Validators
  • Bug Bounty Program
  • The Unique Value of CrossFi Grants
  • FAQ Public Testnet
  • XFI PAD
  • How to do tasks
    • Test XFI Console
    • Faucets
      • Telagram faucet
      • Discord faucet
    • How to verify the task
    • Unique tasks
      • Social media
      • Delegate MPX to validator
    • Daily tasks
      • Send MPX
      • Send MPX to different addresses in the same transaction
      • Claim XFI reward
      • Send Cosmos XFI
      • Send EVM XFI
      • Send XFI to different addresses in the same transaction
      • Send XFI and MPX to different addresses in the same transaction
  • Additional MPX
  • CrossFi Evolution Hackathons
    • Hackaton # 1 - Boost XFI utility
      • Workshops Roadmap & Timeline
        • CrossFi Workshop #1
        • CrossFi Workshop #2
        • Partner Workshop: DEX Guru
          • Block Explorer & Data Warehouse Walkthrough
          • Quick Start Guide for Developers at XFI Hackathon
          • Data Warehouse
            • Query, Dashboard, API
          • Block Explorer
          • XFI Swap
          • Data Warehouse API
        • Partner Workshop: Bware Labs
          • Roadmap
          • Introduction
          • A Guide to Blast
          • Breaking DeFi Barriers with Blast
            • Using CrossFi with Blast
          • Public CrossFi Gateway
            • Public API
          • CrossFi RPC
            • CrossFi RPC Method Calls
          • Blast Intoduction
            • API Docs
            • Things to Know
            • Tutorials & Guides
            • Blast SDK
            • Blast Protocol
        • Partner Workshop: Covalent
          • A Guide to GoldRush
        • Partner Workshop: DIA
        • Workshop FAQs
      • Hackathon Judges
        • Interested in Becoming a Judge?
      • Hackathon FAQs
Powered by GitBook
On this page
  • Introduction (5 minutes)
  • Code Samples Demonstration (10 minutes)
  • Live Coding Session (40 minutes)
  • Conclusion (5 minutes)
  1. CrossFi Evolution Hackathons
  2. Hackaton # 1 - Boost XFI utility
  3. Workshops Roadmap & Timeline

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.

PreviousCrossFi Workshop #1NextPartner Workshop: DEX Guru