Why are you participating for Based Africa?

My motivation for participating in the Based Africa Hackathon is to demonstrate how blockchain can drive real-world solutions that are both innovative and accessible, especially within Africa. Living in Lagos, Nigeria, I understand the local context and challenges, which motivates me to create solutions that empower users through technology.

"Against the House" showcases how decentralized applications can provide transparent, engaging, and fair experiences, but its real power lies in its ease of use. By leveraging OnchainKit with Account Abstraction and Paymaster services, the app simplifies the onboarding process for non-crypto natives. Users can engage with the application without needing to worry about complex wallet setups or gas fees, making the experience seamless and intuitive. This approach helps lower the barriers to entry, making blockchain technology more accessible to a wider audience across the continent.

Participating in this hackathon gives me a platform to connect with other innovators who share a vision of using technology to solve challenges unique to the region. It is an opportunity to contribute to a growing ecosystem and inspire more developers in Africa to build solutions that make a positive impact.

What challenges are you focusing on?

The key challenge I'm addressing with the help of Base is the accessibility and usability of blockchain technology for everyday users, especially within the African community. Many people in the region are not crypto-savvy, and the complexity of using wallets, handling gas fees, and understanding blockchain concepts can be overwhelming.

By utilizing Base and its integration with OnchainKit, "Against the House" aims to lower the barriers to entry for non-crypto natives. Through Account Abstraction and Paymaster services, the app enables users to interact with the blockchain seamlessly without needing to manage gas fees or complex wallet setups. This approach simplifies the onboarding process, making it easier for users to engage with decentralized applications, even if they have no prior experience with cryptocurrencies.

In addition, there's a lack of fair and transparent gaming experiences. Traditional gaming platforms often lack transparency, especially when it comes to random outcomes and rewards. With the use of Chainlink VRF, "Against the House" ensures fairness by providing verifiable randomness, giving users confidence in the integrity of the game.

Ultimately, my focus is on making blockchain solutions more inclusive, approachable, and fair for users across Africa, encouraging more people to explore the benefits of Web3 without the usual technical hurdles.

How does your submission address this challenge?

"Against the House" is a decentralized prediction game designed to make blockchain gaming easy, fair, and accessible, especially for non-crypto natives. The game addresses two major challenges: lowering the barriers to entry for non-crypto natives and ensuring fairness and transparency in gameplay.

1. Simplified Onboarding: Many new users find blockchain interactions complicated due to wallet management and gas fees. "Against the House" integrates OnchainKit, utilizing Account Abstraction and Paymaster services to streamline this process. Players don’t need to worry about gas fees or complex setups—the app handles this for them, making it easy for anyone to participate.

2. Fair Gameplay with Chainlink VRF: Ensuring fairness was critical. Chainlink VRF provides a provably random, on-chain solution to generate game outcomes, guaranteeing transparency. Players can verify that results are not manipulated, building trust and credibility.

3. Cost-Effective on Base: High transaction fees often deter users, especially in emerging markets. By building on Base, the game keeps fees low and benefits from scalable infrastructure. This makes it affordable and ensures smooth gameplay for users without worrying about high costs.

Impact: "Against the House" aims to encourage broader blockchain adoption, particularly in regions like Africa. Its simple, fair, and affordable approach allows users to engage with blockchain technology, demystifying the concept of decentralized apps and fostering trust. This could lead to more developers creating user-friendly, innovative solutions in the Web3 space.

Challenges I ran into

1. Integrating Account Abstraction and Paymaster Services: My goal was to make the game easy to use, even for people who are not familiar with blockchain. This required integrating Account Abstraction and Paymaster services from OnchainKit. However, setting this up was complex because it involved configuring how transactions could be paid without users having to handle gas fees manually.

Solution: I had to spend a lot of time reading through the documentation and experimenting with different configurations. Below is a snippet showing how I handled the configuration:

2. Handling Randomness with Chainlink VRF: Ensuring fairness was key, so I integrated Chainlink VRF (Verifiable Random Function) to generate random results. However, it added a delay because the randomness had to be verified on-chain, which could make users think the app was unresponsive.

Solution: I introduced clear loading states and used timers to manage this delay. Here's how I handled it:

const receipt = async (transactionHash) => {
  try {
    const receipt = await publicClient.waitForTransactionReceipt({
      hash: transactionHash,
    });

    console.log("Transaction receipt:", receipt);

    setTimeout(async () => {
      const logs_receipt = await publicClient.getTransactionReceipt({
        hash: receipt.transactionHash,
      });

      const logs = parseEventLogs({
        abi: ABI,
        logs: logs_receipt.logs,
      });

      const gamePlayedLog = logs.find(
        (log) => log.eventName === "GamePlayed"
      );

3. Managing State Transitions for Game Sessions: Building a seamless UI that could handle multiple states (like "game in progress," "waiting for VRF," and "game results") was tricky. There were instances where different states overlapped, causing unintended behavior.

Solution: I refactored the code to ensure that transitions between states were handled smoothly and used conditional rendering to update the UI only when necessary.