 or hackathons in general, the application may be the most difficult part. This guide is aimed at Hackers, however, if you are interested in mentoring or volunteering at ETHGlobal, please check out those respective guides for more specific information. 

ETHGlobal welcomes builders, whether you're a dev, designer, artist or project manager. When filling out your application, make sure you sufficiently answer every question, particularly what you plan to build at the event! If you have GitHub, Figma or a portfolio, please share that with us! This helps the application reviewers determine your abilities and is especially helpful for our In Person events where we receive more applications than we have venue space for. If you're completely new, that's fine! We suggest participating in one of our several Async events we host every year to begin building your portfolio and experience!   

Applications are reviewed in batches and on a rolling basis. This takes time so don't worry if you haven't heard back yet. You will! If you are in a rush due to visa or travel arrangements, our best advice is to apply as early as you can so you don't put yourself in a situation like this. 

Curious about what the Hacker application looks like? Watch this 

If you plan to participate with a team, keep in mind that everybody needs to submit an application and every application is reviewed on an individual basis, regardless if you are part of a team or not. 

After you have submitted your application and are accepted, you will need to stake your ETH. Everybody needs to stake ETH! This includes any team members you may have brought on with you. 

 - It's a great incentive to get people committed to seeing the hackathon through and submitting a project by the end. If you don't have a wallet already, now is the time to get one and make yourself comfortable with it.  

If you are ever facing issues regarding staking or receive error messages, please take a screenshot of the staking page and of your dev console so we can quickly determine what the error is. You can send this to 

We allow hackers to reuse their stake for our Async events. This is only possible after you have successfully submitted a project. We don't allow stakes to be reused for our In Person events. You are able to reuse your stake from your Hacker Dashboard. 

After you have staked your ETH, connect your Hacker Dashboard to our 

! We share a lot of information on Discord, including important announcements and links for our events, workshop and project submission reminders and many other items. It will also give you the ability to connect with other hackers, our partners and our mentors. It is the quickest and easiest way to begin making connections before you start an event. Our Discord server is also the best way to keep up with one another after an event finishes. 

Did you invite team members to join you for our event? Make sure they have submitted an application, have been accepted and have staked their ETH! Did you connect your Hacker Dashboard to Discord? You did? Good! Because you can now see our #find-a-team channel and begin connecting with hackers who are also looking to join a team or form a team. 

We also host several online Team Formation & Idea Brainstorming sessions before our In Person events to give you more opportunities to connect with other hackers. There will also be an in person Team Formation & Idea Brainstorming session at our Cafe and on the Friday evening after the Closing Ceremony. 

During the Team Formation & Idea Brainstorming sessions for our In Person events, we will hand out stickers that say "Looking to Join a Team" and "Team Formed Join Us!" to help identify who you are and what you are looking for. The sessions then begin with hackers introducing themselves, sharing what their role is (dev, designer, front end, back end, Solidity expert, etc.) as well as what project idea they want to work on or what ideas interest them. Hackers are invited to do this and when everybody has had the chance to speak, everybody in the room will be able to freely move around and connect with the hacker/team they found interesting. If this is for our Async event, Zoom Breakout Rooms are created and then you are able to have smaller conversations amongst hackers/teams you found interesting. 

If you're not looking for a team, that's fine too. You can hack solo! And team sizes cannot be larger than 5 hackers. And you cannot be a part of more than one team. This means you can only hack on one project!  

We strongly encourage hackers to form teams well ahead of time before an event happens so that once hacking begins during the Opening Ceremony, you are focused on building your project. 

You are of course able to change teams during the event too, but hopefully you are able to get along with everybody!

ETHGlobal Waterloo hackers at Team Formation & Brainstorming Session

During Team Formation & Idea Brainstorming sessions, ideas naturally come up as hackers are talking about projects they want to work on. And once hackers are moving around speaking to one another, or hackers are in Zoom Breakout Rooms for our Async events, ideas continue to grow and spread. 

If you are unsure of what to work on and need inspiration, you are welcome to have a look at past events where we document and showcase projects, finalists, workshops and keynote speeches! 

The Partner Prizes page for each event also documents ideas and bounties that could help get your creative juices flowing!

 be working on their projects before the event officially begins. This includes coding, designing assets etc. Each hack submission will be judged 

solely on the quality of the work completed during the duration of the hackathon

. We require everyone starts building from scratch - if there is a situation where a project / team are porting or continuing existing projects then the result is that you may continue to participate 

but you won't be eligible for being a Finalist.

Note: In order to ensure that no pre-existing work makes its way into the submission, you must also use version control for your code throughout the course of the event.

 Any repositories with single commits of large files without proper history will be default assumed to be unqualified unless proven otherwise

Using open-source libraries & boilerplates

In order to keep the event fair to all participants - we require hackers to start their projects when the event begins so that no individual or team has a head-start

You are however, welcome to use any open source libraries, starter-kits/boilerplates, or designing a spec of your hack

Your submission page will ask you to share the source code (GitHub Repo, Figma, etc.) and show that work wasn't done before the event

You must make a clear distinction between starting to code/design and updating pre-existing projects

Please do not book your travel or accommodations until you have received an official acceptance email and have staked your ETH for the event.

 You wouldn't want to go through all the time, effort and energy of traveling and spending money if you haven't been accepted or staked your ETH. 

If you need a visa letter of invitation, we can provide one for you. All we will need is your full legal name, passport number and date of birth. Sometimes visa applications require a local phone number or point of contact. Unfortunately we are not able to provide this information if nobody from the team is based there. 

In the unfortunate event that you are no longer able to attend, please let us know ASAP so we can withdraw your hacker application and mark your stake to be returned to you. This will happen around 2-3 weeks after the event ends.  

Meals, snacks and beverages will be provided throughout the weekend. Each meal will vary depending on which city we are in. You will generally receive a Friday dinner, Saturday brunch and dinner and a Sunday breakfast and lunch. 

We offer a chill room/space on a first come first serve basis

. This room will contain approximately 30 inflatable mattresses with minimal blankets and pillows. It is not luxurious accommodation. The venue will be open 24/7 once registration opens at 1PM on the Friday of the event.  

Our in person events will not have showering facilities. We suggest finding local gyms for free day passes. 

You don't need to bring your whole closet with you. We suggest packing light! If 

We will share a City Guide several weeks before an event that will list restaurants, bars, things to do and side events! There are always local hackers that participate in our events so we suggest asking questions in Discord on what they recommend!

Chill Space at ETHGlobal New York...on the last day

Pre Event

It is worth noting that our In Person events and Async events aren't 100% similar, for obvious reasons. We have noted where a particular area is only applicable to one type of event.

The venue for our In Person events will open at 1PM. You will not be able to enter before this time. During registration, volunteers will greet you and ask for your 

 (from your Hacker Dashboard or from an email) and a photo ID. They will hand print your name on a badge and hand you your 

This is the most important item you will receive at our events and is the only way to access the venue. Do not lose your wristband. Do not take off your wristband. Yes, you can shower with it on. You will not be let into the venue if you lose it. 

The last items you will receive at registration is your swag bag and your t-shirt!  

An ETHGlobal Tokyo volunteer displaying her badge and lanyard...with an army of swag bags in the background!

For our Async events, after you have staked your ETH, you are confirmed and "registered" to hack! Please make sure you meet our application deadlines as we eventually close applications and will not open them back up once they are closed. 

An hour after the venue opens, workshops begin!

 Across a 4-5 hour block, there are approximately 3-4 rooms that host simultaneous 20-30 minute workshop sessions put on by our Partners. These workshops provide tech stack demos, product discussions and serve as another great way to gain inspiration for ideas. After the event is over, each workshop will be uploaded to our YouTube channel.  

These workshops are purposefully hosted before hacking begins and the Opening Ceremony for you to take advantage of the content. 

For our Async events, workshops are hosted on Zoom calls at various times during the weeks long hackathons. You will receive calendar invites for these workshops. If you are unable to make them due to time zone differences, they will be uploaded to our YouTube channel too!  

 happens right after dinner and is a must in order to successfully have all the knowledge you need heading into the weekend. You will receive information on rules and criteria around projects, submissions and judging and our 

. There might also be guest appearances from notable people within the space that happens in a "fireside" chat format. You will know who these guest speakers are before the event. The Opening Ceremony will also be uploaded to our YouTube channel.

For our Async events, you will receive the same information around rules and what to expect over the course of the hackathon. Same for our In Person events, there might also be guest appearances from notable people within the space. The Kickoff Ceremony is hosted on 

 for all to see and it will be uploaded to our YouTube channel.    

Hacking officially begins during the Opening Ceremony

. This means that you should not work on projects before this time. You are able to brainstorm and ideate, but no code should be written before now. If you haven't found a team yet, that is fine too! There is no set deadline for when you should have found a team. However, as mentioned above, we strongly encourage teams to form before hacking begins so you can focus right away on your project ASAP. 

Project Check-ins and Project Feedback Sessions

An ETHGlobal Paris hacker receiving project feedback

 are an important part of our hackathons because they provide you an opportunity to let us know how you're doing. You are also able to get feedback on the current status of your project. They are there to serve you! 

Project Check-ins only apply to our Async events

. We will open up the UI on your Hacker Dashboard and you will answer several questions about your project. We are particularly interested in if you are currently blocked on anything. We read every submission and the event Partners also receive these submissions if you selected them. We host 1-2 Project Check-ins during our Async events, usually a week apart. A member of the ETHGlobal team will reach out to you if you are blocked on anything. If you are not blocked on anything, brilliant! Keep doing what you're doing. 

Project Feedback Sessions apply to both our In Person and Async events

. Generally speaking, for our In Person events, you are able to get feedback on your project at any time from our Mentors and Partners. Our Mentors and Partners are there to help you get unblocked on anything and to answer your questions. However, there is also a dedicated time on Saturday for our In Person events where you are able to go up to the Mentor table and ask our Mentors for feedback. 

Project Feedback Sessions for our Async events are hosted in Zoom

. We generally have 1-2 sessions depending on the length of the Async event. It is an open forum where you can share the current status of your project, whether that's a brief demo, slides, Figma assets or anything! We invite our Mentors and Partners to attend and they will be the ones to provide you with feedback. Of course, if you don't feel comfortable speaking on camera, you can always type your project status update in the chat and somebody will address it there. 

ETHGlobal Waterloo hackers next to the Mentor Station

An ETHGlobal Tokyo hacker right before Sunday morning project submissions

It's submission time!! Sunday mornings are always very frantic for hackers. Projects are due Sunday mornings at 9AM (local time) for our In Person events and at 12:00PM ET for our Async events. 

We can't stress this enough...submit your projects at least two hours before they're due.

 This will give you plenty of time to make sure that your project submission form is absolutely correct, that you don't have any technical issues when trying to submit your project (or upload your project video) and then you don't stress yourself out! We will send countdown notifications on Discord as well and your Hacker Dashboard will display a countdown timer to make sure you are fully aware of when projects are due. 

We open up the Project Submission UI at least 24 hours before projects are due. We encourage hackers to take the time to browse around the UI, get familiar with what the questions are and what you are expected to provide. 

One of the most time consuming aspects of the project submission is the Demo Video

. The Demo Video is required for our Async events because it is what the judges will watch when evaluating your projects. For In Person events, the Demo Video is not required, however, it is a nice to have because it will live on your 

 and partner judges can watch it when they do their evaluations. 

 is an example of a good demo video for reference. 

ETHGlobal Paris hackers standing in the queue waiting to enter the Judging Rooms

Judging for our events, both In Person and Async, is run almost the same. We have two different types of judging, Partner Judging and Finalist Judging. You are able to select one or the other, or both!  

 is for Partner prizes/bounties. This judging is held asynchronously during our events. For In Person events, hackers are able to go up to Partner booths and present their projects live to the Partners they selected prizes for. Hackers generally do this after they have presented for judges in Finalist Judging. However, if you did not select Finalist Judging, you may begin presenting to Partners at 9:30AM (local time). There is no limit to how many Partner prizes you can select, however, history and experience shows that the fewer you select, the better your chances...and sanity! For Async events, you don't need to do anything else after you select which Partner prizes you want. Partners will receive your Project submission and begin reviewing projects asynchronously. The winners will be selected and announced during the Closing Ceremony/Finale. 

 is for ETHGlobal Finalist prizes and the chance to present during the Closing Ceremony/Finale. For In Person events, you will receive an email and notification on your Hacker Dashboard stating where to go for the Judging "Green Room" and the Judging Rooms. You will notice a queue of hackers waiting for something other than food...this is it! The Green Room is a checkpoint to make sure your entire team is present, ready and that you are made aware of what will happen when you enter the Judging Rooms. You will also find out your Judging Room # from the Green Room. After you have cleared the Green Room, you will go to your Judging Room. An ETHGlobal Volunteer will be there to greet you and confirm you're the next team to present. You will present your project to two judges. Once it is your turn to go, you will plug in your laptop and present! You will have 4 minutes to present your project and then there will be 3 minutes for Q&A with the judges. After you have finished presenting, don't forget to take your "I Demoed" stickers and then take your group photo in front of our lovely photo backdrop banners! Volunteers will guide you through this.  

Projects will be judging using the following criteria. Each project will be ranked by our judges on the following 5 categories:

 - What is the complexity of problem being addressed, or their approach to solving it?

 - Is the project tackling a new or unsolved problem, or creating unique/creative solution to an existing problem?

 - How complete/functional is the project? Is it ready to be used by their intended audience?

 - Is the project easy to use? Has the team made good effort in removing friction for the user?

 - Catch-all for other factors the previous categories may have missed

If your project is selected as a Top 10 Finalist at an In Person event, you will be notified via email to meet with members of the ETHGlobal Team to go over logistics for presenting during the Closing Ceremony/Finale. This is to prepare you for presenting on the main stage. 

, there are two rounds of judging. Round 1 judging will take place the next day (Monday) after your projects were submitted. During this round, Judges are looking for:

If your project makes it through Round 1 judging, you will receive an email with details about presenting to judges for Round 2 judging. Your Hacker Dashboard will also reflect these steps.   

, you will attend a Green Room on a Zoom meeting. During this Green Room, we make sure your audio and video work. Once you have cleared the Green Room, you will be assigned to a Judging Room in a different Zoom webinar. It is here that your two judges will be waiting, along with two volunteers and other hackers that were assigned to the same Judging Room as you. 

, a volunteer will ask you/your team to raise your hands when it is almost your turn to go. They will make you Presenters in Zoom. Another volunteer will play your demo video for the judges and everybody else in the room. After your demo video finishes, you will have 3 minutes of Q&A with the judges. Once your time is finished, you will be made an Attendee in Zoom again. At this point, you are welcome to stay in the Zoom webinar and watch other projects present, or you may leave the Zoom webinar. 

ETHGlobal Tokyo hackers greeting their judges

Congratulating ETHGlobal Paris hackers on Sunday morning

The Closing Ceremony/Finale brings brings everybody together one final time before our event ends. We cover some logistical items such as stake returns and providing us your feedback via our Feedback Form. However, the bulk of this time is spent showcasing our Top 10 Finalists (+/- depending on the number of high quality projects that come out of our events) and announcing Partner Prize winners. 

For our In Person events, this will take place a couple of hours after Judging finishes. Generally everybody is very tired at this point, but you're almost across the finish line! For our Async events, this will take place on the last day of the event, which is generally on the Friday of the week when project submissions took place. 

During the Event

Prizes and stakes are distributed to hackers approximately 2-3 weeks after an event ends. If you won a prize, you will receive an email notification reminding you to make sure your Wallet address is updated and correct. Stake returns will appear in the Internal Transactions tab of 

. If you do not see your stake return, it could be because you didn't submit a project so your stake was slashed. Your prize and stake return transactions will come from the 

All of the photographs taken during our In Person events will be uploaded to our 

 within 2-3 days after the event ends. Edited workshop recordings will also be uploaded to our 

 in the coming days after an event finishes. 

Please refrain from making any changes to your project until prizes have been distributed. This will help the project reviewers who are making sure no cheating took place and to finalize prize winner eligibility. 

Once prizes have been distributed, we hope that you will continue building and working on your project after an event ends! 

After an event ends, we hope you will continue working on your project or continuing to learn and grow within the Ethereum space. 

We are currently working on defining a more structured approach to how we can continue helping hackers work on their projects after an event finishes. And if you don't want to continue working on your project, but maybe you want to find a job in the Ethereum space or continue making new connections with others, whether it is virtually or in person near your community and region, we are here to help support and facilitate that.

This section of the guide will continue to be updated as we refine this aspect of ETHGlobal. 

ETHGlobal Lisbon hackers at the end of a long weekend

Post Event

A guide to help novices and veterans alike successfully navigate an ETHGlobal Hackathon!

All You Need To Know About Our Hackathons!

ETHGlobal

Rory Arredondo

Celo is a mobile-first, carbon-neutral blockchain that offers decentralized finance tools and services intended to be accessible to anyone with a mobile phone.

In addition to the blockchain client, some core components of the Celo protocol are implemented at the smart contract level and even off-chain (e.g. phone number verification via SMS).

Celo's mission is to build a financial system that creates the conditions for prosperity—for everyone.

By using a pBFT-based PoS consensus protocol, Celo can process and achieve consensus on blocks extremely quickly, which can contribute to high TPS numbers while still maintaining a robust and decentralized 

In addition to high throughput, pBFT also gives you 1 block finality, so you never have to worry about your users having their transactions rolled back or re-orged. This means that transactions are finalized in 5 seconds, and this latency can be easily reduced as the network grows.

Celo is a fork of the Go-Ethereum codebase which means that it is fully EVM compatible up to the latest hard fork. This means that your signature schemes, pre-compiles, and any truffle tools you’re used to work perfectly out of the box.

With the growth of DeFi, many dapps need access to stablecoins, which means that any serious alternative to Ethereum must have a stablecoin on the platform.

The Celo stablecoin platform is an integral part of the Celo network with Celo Dollars (cUSD), Celo Euro (cEUR) and Celo Brazilian Real (cREAL) already live.

Celo supports paying for transaction fees using ERC-20-like tokens, with cUSD being the first of these tokens. This means that your dapp users can send cUSD with ease, even if they don’t have the CELO asset in their wallets. Additionally, if your dapp has a token, you can create an on-chain governance proposal to whitelist it so that it, too can be used to pay for gas.

The production Celo network, Mainnet was previously known as the Release Candidate 1 network. Deployed by the Celo community starting 4/22/20, the network is currently working towards enabling the Celo stability mechansim. Much of the activity is being driven by the validator organisations that featured on the leaderboard of 

If you're a developer considering building on the Celo platform, or want to try out the Celo Wallet, start with 

 immediately and use it for experimenting with. 

 assume you are using Alfajores. The network is managed by cLabs, who operate all of its validators, and its software and deployed contracts will track mainnet.

If you're interested in operating one or more nodes that make up Celo's infrastructure, start with 

. Baklava's validators and full nodes are operated by the community. It is intended to provide a venue to test new builds of the Celo Blockchain software, trial on-chain governance proposals, and for node operators to build operational best practices. Support for developers and users of the Wallet is not the primary focus.

The Baklava Testnet is a non-production Testnet for the Validator community.

: Build familiarity with the processes used on Mainnet, and to verify the security and stability of your infrastructure with the new software.

: Discover bugs in new software releases before they reach Mainnet.

: Experiment with new infrastructure configurations in a low-risk environment.

For Earth Day 2023, the Celo Community has proposed a new 

, which strives to position Celo to become deflationary as well as further Celo's sustainability commitment . With each transaction, 

 proposes that 80% of the base fee would be burned and 20% would be sent to a Carbon Offset address to purchase high-quality carbon offsets. This testnet is intended to support this new ‘Ultragreen’ mechanism before this change is later proposed for a future hardfork.

Introduction

Celo is oriented around providing the simplest possible experience for end-users, who may have no familiarity with cryptocurrencies and may be using low-cost devices with limited connectivity.

To achieve this, Celo takes a full-stack approach, where each layer of the stack is designed with the end-user in mind while considering other stakeholders (e.g. operators of nodes in the network) involved in enabling the end-user experience.

An open cryptographic protocol that allows applications to make transactions with and run smart contracts in a secure and decentralized fashion. The Celo blockchain code has shared ancestry with

 and maintains full EVM compatibility for smart contracts. However, it uses a

 (BFT) consensus mechanism (Proof-of-Stake) rather than Proof-of-Work and has different block format, transaction format, client synchronization protocols, and gas payment and pricing mechanisms.

A set of smart contracts running on the Celo blockchain that comprise much of the logic of the platform features including ERC-20 stable currencies, identity attestations, proof-of-stake, and governance. These smart contracts are upgradeable and managed by the decentralized governance process.

Applications for end users built on the Celo Platform. The Celo Wallet app, the first of an ecosystem of applications, allows end-users to manage accounts and make payments securely and simply by taking advantage of the innovations in the Celo Protocol.

Applications take the form of external mobile or backend software: they interact with the Celo blockchain to issue transactions and invoke code that forms the Celo Core Contracts’ API. Third parties can also deploy custom smart contracts that their own applications can invoke, which in turn can leverage Celo Core Contracts. Applications may use centralized cloud services to provide some of their functionality: in the case of the Celo Wallet, push notifications, and a transaction activity feed.

The Celo blockchain and Celo Core Contracts together comprise the Celo Protocol.

Celo Stack

Celo Composer allows you to quickly build, deploy, and iterate on decentralized applications using Celo. It provides a number of frameworks, examples, and Celo-specific functionality to help you get started with your next dApp.

The Greeting dApp will be a React dApp connected to a smart contract that users can use to greet other wallets on the Celo blockchain.

The easiest way to start with Celo Composer is by using @celo/celo-composer. This CLI tool lets you quickly build dApps on Celo for multiple frameworks, including React (with either react-celo or rainbowkit-celo), React Native (w/o Expo), Flutter, and Angular. To get started, just run the following command and follow the steps:

2. Select "React" as the front-end template.

3. Select "Hardhat" as the smart contract framework.

4. Select "No" for subgraph, we don't need subgraph for this dApp but in case you need it is available.

6. Run the "yarn" command in the project directory, to install all dependencies.

After Walletconnect v2 launched, every dApp requires WalletConnect Project ID to use it so let's get one!

7. Sign up for Walletconnect and create a project using the button on top right corner.

9. Create a ".env" file in packages/react-app and paste the projectID

10. You should now be able to run the dApp using the following command and see the below output.

Initialization

Create "Greeter.sol" in "packages/hardhat/contracts" and add the following code.

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

contract Greeter {

    constructor() {}

}

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

contract Greeter {
    mapping(address => string) public greetings;

    constructor() {}
}

3. Add "NewGreeting" event which will be monitored by the frontend to get the previous greetings on load.

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

contract Greeter {
    mapping(address => string) public greetings;

    event NewGreeting(string greeting, address sender);

    constructor() {}
}

4. Finally, the "greet" function that takes in the address that the user wants to greet ("to") and the "greeting" itself.

This is how the final code would look like

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

contract Greeter {
    mapping(address => string) public greetings;

    event NewGreeting(string greeting, address sender);

    constructor() {}

    function greet(address to, string memory _greeting) external {
        greetings[to] = _greeting;
        emit NewGreeting(_greeting, msg.sender);
    }
}


1. We can compile and deploy this contract on-chain, before that, we will need a private key of an account that will deploy the contracts

2. Create a duplicate file like ".envexample" in packages/hardhat directory, rename it too ".env" (mandatory) and use the private key you got from Metamask as the value for the PRIVATE_KEY variable. You can remove the MNEMONIC variable if you are using the private key.

3. Celo Composer already has the configuration to deploy to Celo mainnet and testnet network, if you are wallet does not have any testnet funds then you can get them from 

4. We need to create a deploy script to deploy the Greeter contract, since the Greeter project is a really popular starting point for new devs we have a deploy script already create in the packages/hardhat/scripts folder called "sample-script.js".

5. Let's understand the "main" deploy function

async function main() {
  const Greeter = await hre.ethers.getContractFactory("Greeter"); // We get the contract to deploy
  const greeter = await Greeter.deploy(); // Passing constructor arguments

  await greeter.deployed(); // Send Deploy Transaction and wait

  console.log("Greeter deployed to:", greeter.address); // Print out the deployed contract address
}

6. Change directory in your terminal to packages/hardhat and we can run the deploy scripts using the following command:

npx hardhat run scripts/sample-script.js --network alfajores

7. On successful deployment, you should get the following output:

8. You can view the contract on the testnet 

1. You can see it is not verified, so let's verify it. For verification, you will need a CeloScan API key you can get it from 

2. Paste this api key in already created "packages/hardhat/.env"

3. Now you can use the following command to verify the contract:

npx hardhat verify <CONTRACT_ADDRESS> --network alfajores

4. On successful verification, you should see the following output.

Smart Contracts

For the frontend dApp, we need to add the functionality of letting user connect their wallet. Since you are using Celo Composer, this is already done!

You can run the following command in the terminal you serve your dApp on localhost:

You should be able to see the following output:

Based on whether the user has connected the wallet or not we might want to hide the UI. We can achieve this using wagmi's useAccount hook!

export default function Home() {
    const { isConnected } = useAccount();

    if (!isConnected) return null;

    return (
        <div>
            <div className="h1">
                There you go... a canvas for your next Celo project!
            </div>
        </div>
    );
}

After the user connects their wallet, the first thing the dApp needs to do is to start watching for new "NewGreeting" events emitted by the smart contracts in the current session of the user.

You will need GreeterABI, create a file named "GreeterABI.js" in packages/react-app/abis.

Copy Greeter ABI from packages/hardhat/artifacts/contracts/Greeter.sol/Greeter.json.

Paste the ABI into GreeterABI.js as follows:

export default function Home() {
    const { isConnected } = useAccount();
    const [greetings, setGreetings] = useState([]);


    const unwatch = useContractEvent({
        address: "0x77619E547bCBc4693ac6f7309a2f099f0aa4fc21",
        abi: GreeterABI,
        eventName: "NewGreeting",
        listener(logs) {
            let newGreeting = logs.map((log) => log.args);
            setGreetings([...greetings, ...newGreeting]);
        },
    });

    useEffect(() => {
        return () => {
            if (unwatch) {
                unwatch();
            }
        };
    }, []);

    if (!isConnected && isClient) return null;

    return (
        <div>
            <div>
                <table className="table mt-7 w-full">
                    <caption className="mb-2 text-lg font-bold">
                        Greetings
                    </caption>
                    <tbody className="h-96 overflow-y-auto">
                        {greetings.map(({ greeting, sender }, index) => {
                            return (
                                <tr
                                    key={index}
                                    className="flex items-center space-x-2 w-full"
                                >
                                    <td className="p-2">{sender}</td>
                                    <td className="p-2">{greeting}</td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        </div>
    );
}


To Greet, the user needs to specify two things to perform a "greet" function call on the smart contract:

Here is the code for the InputField component.

import { InputHTMLAttributes } from "react";

function InputField({
    label,
    value,
    onChange,
    type,
    placeholder,
    className,
}) {
    return (
        <div className={className}>
            <label className={`block mb-2 font-medium text-gray-500 `}>
                {label}
            </label>
            <input
                type={type}
                className={`bg-white border border-black text-black text-base focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ${className}`}
                placeholder={placeholder ?? ""}
                required
                value={value}
                onChange={onChange}
            />
        </div>
    );
}

export default InputField;



export default function Home() {
    const { isConnected } = useAccount();
    
    const [recipient, setRecipient] = useState("");
    const [greeting, setGreeting] = useState("");

    if (!isConnected && isClient) return null;

    return (
        <div className="w-[500px]">
            <div className="w-full flex flex-col gap-5 items-stretch">
                <InputField
                    label="Enter recipient"
                    value={recipient}
                    onChange={({ target }) => setRecipient(target.value)}
                />
                <InputField
                    label="Enter Greeting"
                    value={greeting}
                    onChange={({ target }) => setGreeting(target.value)}
                />
            </div>
            // Greetings table code...
        </div>
    );
}


After the user has specified the recipient address and the greeting, we need to trigger the "greet" contract call from the frontend.

Guides

Interested in contributing? Ping us at guides@ethglobal.com

All You Need To Know About Our Hackathons!

Intro to Celo

Intro to Cartesi

Building a Superfluid Super App

Introduction to Unlock Protocol

Creating ERC20 Token on Polygon

Intro to Sequence Smart Contract Wallet

Introduction to MetaMask Snaps

Introduction to Optimism

Introduction to Livepeer

Verifying Storage on Filecoin

Introduction to libp2p

Smart Contract Development Guidelines

Bridging Tokens & Data

Intro to Push Protocol

Intro to Ethereum Name Service

Money Streaming with Solidity 101

Getting started with Metamask