Building a Soccer Prediction DApp: A Complete Guide to Smart Contract Gaming

Cover image source: Unsplash

Introduction

In this comprehensive tutorial, we’ll dive into the exciting world of decentralized application (DApp) development by building a soccer prediction game using smart contracts. Players will have the opportunity to bet on match outcomes using custom tokens, making this project an excellent way to learn about smart contract development while creating an engaging and practical application.

Throughout this tutorial, we’ll cover essential concepts and techniques, including:

• Creating and deploying ERC20 tokens on the blockchain
• Implementing game logic using smart contracts
• Handling user interactions and transactions
• Building a Web3-enabled frontend
• Integrating MetaMask for Seamless Wallet Connections

By the end of this tutorial, you’ll have a solid understanding of how to develop a complete DApp from scratch, empowering you to create your own decentralized applications in the future.

What is a Smart Contract?

A smart contract can be thought of as a digital vending machine that automatically executes predetermined rules when specific conditions are met. It operates on the blockchain, ensuring transparency, immutability, and trust in the execution of its logic.

In the context of our soccer prediction game, the smart contract will handle crucial aspects such as:

• Token transfers for placing bets
• Game result verification
• Prize distribution to the winners

Let’s take a closer look at a key part of our game’s smart contract:

function PlaceBet(uint _tokenAmount, uint _gameId, team _betTeam) public { 

    require(_tokenAmount <= maxBetSize, "Bet exceeds maximum size"); 

    require( 

        _tokenAmount <= token.balanceOf(msg.sender), 

        "Not enough token to place bet" 

    ); 

    require(_tokenAmount > 0, "Token amount must be greater than 0"); 

    // ... more code ... 

} 

This PlaceBet function demonstrates several core principles of smart contracts:

1. Automatic validation: The require statements ensure that certain conditions are met before proceeding with the execution. For example, it checks if the bet amount is within the maximum allowed size and if the user has sufficient tokens to place the bet.
2. State management: The smart contract keeps track of important data, such as the bets placed by each user and their token balances. It makes sure these pieces of data is securely stored on the blockchain.
3. Secure transaction handling: By executing the betting logic within the smart contract, we ensure that the transactions are handled securely and transparently, without the need for intermediaries.

Blockchain in Real-World Scenarios

Prediction markets and betting platforms are prime examples of how blockchain technology can be applied to real-world scenarios. Our soccer prediction game showcases the benefits of using blockchain in several ways:

1. Transparency: All bets and game results are recorded on the blockchain, making the entire process transparent and verifiable. The BetPlaced event in our smart contract emits important information whenever a bet is placed:

event BetPlaced( 

    address indexed _owner, 

    uint indexed _gameId, 

    uint _tokenAmount, 

    team _betTeam 

); 

This event allows anyone to track and audit the betting activity on the platform.

2. Fair Play: The smart contract automates the prize distribution based on predefined rules, ensuring fair play and eliminating the need for manual intervention. The ClaimPrize function handles the prize calculation and distribution logic:

function ClaimPrize(uint _gameId) public nonReentrant whenNotPaused { 

    require(gameFinished[_gameId], "Game is not finished yet"); 

    // ... prize calculation and distribution logic ... 

} 

By leveraging the immutability and transparency of the blockchain, players can trust that the prizes will be distributed fairly and accurately.

3. Custom Token Economy: Our soccer prediction game utilizes a custom ERC20 token called SaigonTechCoin (STC). This token serves as the betting currency within the platform and provides several advantages:

• Controlled token minting: The token supply can be managed by the contract owner, ensuring a balanced economy.
• Simple purchase mechanism: Users can easily buy STC tokens using the TopUp function, which allows them to exchange Ether for tokens at a fixed price.
• Withdrawal options with fees: Users can withdraw their tokens, subject to a small withdrawal fee, adding an additional layer of flexibility to the platform.

By creating a custom token, we have full control over the economic model of our prediction game, enabling us to tailor it to our specific needs and goals.

Setting up the Development Environment

To build our soccer prediction DApp, we’ll need to set up our development environment with the following tools:

1. Development Dependencies:

• Node.js and npm: These tools are essential for managing dependencies and running scripts.
• Truffle or Hardhat: These frameworks provide a development environment for writing, testing, and deploying smart contracts.
• MetaMask browser extension: MetaMask allows users to interact with the Ethereum blockchain and manage their wallets directly from the browser.
• Web3.js library: This JavaScript library enables interaction with Ethereum nodes, making it easy to integrate smart contract functionality into our frontend.

2. Project Structure:

project/ 

├── contracts/ 

│   ├── HighLowBetGame.sol 

│   └── SaigonTechCoin.sol 

├── web3/ 

│   └── js/ 

│       └── script.js 

└── package.json 

The contracts directory will contain our smart contract files, while the web3 directory will house our frontend code. The package.json file will manage our project dependencies.

3. Smart Contract Dependencies:

In our smart contracts, we’ll be using several dependencies from the OpenZeppelin library, which provides secure and audited implementations of common smart contract patterns:

import "@openzeppelin/contracts/access/AccessControl.sol"; 

import "@openzeppelin/contracts/utils/ReentrancyGuard.sol"; 

import "@openzeppelin/contracts/utils/Pausable.sol"; 

These dependencies will help us ensure the security and reliability of our smart contracts.

With our development environment set up, we’re ready to dive into the creation and deployment of our smart contracts.

Creating and Deploying Smart Contracts

Let’s break down our smart contracts and explore their key features:

1. SaigonTechCoin (STC) Token Contract

The SaigonTechCoin contract is an ERC20 token that will be used for betting in our soccer prediction game. Let’s take a look on its main components:

contract SaigonTechCoin is ERC20, AccessControl { 

    uint tokenPrice; 

    uint withdrawalFee; 

 

    constructor(address defaultAdmin) ERC20("Saigon Tech Coin", "STC") { 

        _grantRole(DEFAULT_ADMIN_ROLE, defaultAdmin); 

        tokenPrice = 1 gwei; 

        withdrawalFee = 2; 

    } 

 

    function TopUp() public payable { 

        require(msg.value >= tokenPrice, "Not enough money to buy"); 

        uint tokenToTransfer = msg.value / tokenPrice; 

        _mint(msg.sender, tokenToTransfer); 

        // ... remainder handling ... 

    } 

} 

Key features of the SaigonTechCoin contract:

• Custom token price in gwei: The tokenPrice variable determines the price at which users can buy STC tokens.
• Top-up functionality: The TopUp function allows users to purchase STC tokens by sending Ether to the contract. The number of tokens minted is based on the amount of Ether sent divided by the token price.
• Withdrawal mechanism with fees: Users can withdraw their STC tokens, subject to a withdrawal fee specified by the withdrawalFee variable.
• Access control: The contract inherits from the AccessControl contract, enabling granular access control for administrative functions.

2. HighLowBetGame Contract

The HighLowBetGame contract contains the core game logic for our soccer prediction game. Let’s examine its key components:

contract HighLowBetGame is AccessControl, Pausable, ReentrancyGuard { 

    struct BetData { 

        uint tokenAmount; 

        team betTeam; 

    } 

 

    mapping(uint => mapping(address => BetData)) private bets; 

    mapping(uint => mapping(team => uint)) private totalBetAmount; 

 

    function PlaceBet(uint _tokenAmount, uint _gameId, team _betTeam) public { 

        require(_tokenAmount <= maxBetSize, "Bet exceeds maximum size"); 

        // ... validation and bet placement logic ... 

        emit BetPlaced(msg.sender, _gameId, _tokenAmount, _betTeam); 

    } 

 

    function ClaimPrize(uint _gameId) public nonReentrant whenNotPaused { 

        // ... prize calculation and distribution logic ... 

    } 

} 

The HighLowBetGame contract includes the following key features and security measures:

• ReentrancyGuard: Prevents reentrancy attacks by ensuring that functions cannot be called recursively.
• Access control: Allows only authorized accounts to perform certain actions, such as setting game results.
• Pausable: Enables the contract owner to pause the contract in case of emergency situations.
• Proper validation checks: Ensures that bets are placed within the allowed limits and that users have sufficient token balance.
• The contract uses mappings to store bet data for each game and user, as well as the total bet amount for each team in a game. The PlaceBet function handles the bet placement logic, while the ClaimPrize function manages the prize distribution to the winners.

This diagram illustrates the flow of a typical betting process in our soccer prediction game. The user interacts with the HighLowBetGame contract to place a bet, which transfers tokens from the user’s account to the contract. The contract emits a BetPlaced event to record the bet on the blockchain. When the game is finished and the results are set, users can call the ClaimPrize function to receive their winnings based on the calculated prize distribution.

3. Deployment Process

To deploy our smart contracts to the blockchain, we’ll follow these steps:

3.1 Compilation: We’ll compile our smart contracts using either Hardhat or Truffle. The compilation process converts the Solidity code into bytecode that can be executed on the Ethereum Virtual Machine (EVM).

// Using Hardhat 

npx hardhat compile 

 

// Using Truffle 

truffle compile 

3.2 Deployment Script: We’ll create a deployment script that automates the process of deploying our contracts to the blockchain. Here’s an example deployment script using Hardhat:

// deploy.js 

async function main() { 

    // Deploy Token Contract first 

    const SaigonTechCoin = await ethers.getContractFactory("SaigonTechCoin"); 

    const stc = await SaigonTechCoin.deploy(adminAddress); 

    await stc.deployed(); 

    console.log("SaigonTechCoin deployed to:", stc.address); 

 

    // Deploy Game Contract 

    const HighLowBetGame = await ethers.getContractFactory("HighLowBetGame"); 

    const game = await HighLowBetGame.deploy(stc.address); 

    await game.deployed(); 

    console.log("HighLowBetGame deployed to:", game.address); 

} 

The deployment script first deploys the SaigonTechCoin contract, passing the admin address as a constructor argument. Then, it deploys the HighLowBetGame contract, passing the address of the deployed SaigonTechCoin contract as a constructor argument.

4. Understanding Contract Deployment on the Blockchain

When a contract is deployed to the blockchain, several things happen under the hood. Let’s take a closer look:

4.1 Contract Creation Transaction: Deploying a contract involves sending a special transaction to the blockchain that contains the contract’s bytecode and any necessary constructor arguments. Here’s an example of what a contract creation transaction looks like:

{ 

    "from": "0x123...", // Deployer's address 

    "nonce": "0x0",     // Transaction count 

    "gasPrice": "0x4a817c800", // Gas price in wei 

    "gasLimit": "0x6691b7",    // Maximum gas allowed 

    "data": "0x608060405234801...", // Contract bytecode 

    "value": "0x0",     // ETH sent with deployment 

    "chainId": 1        // Network ID 

} 

The transaction includes the deployer’s address, the contract bytecode, and other metadata required for the deployment.

4.2 Contract Storage on Chain: Once the contract creation transaction is mined and included in a block, the contract is permanently stored on the blockchain. The contract’s storage consists of the following components:

Contract Address: 0xabcd... (unique address generated) 

├── Contract Code 

│   └── Deployed bytecode 

├── Storage 

│   ├── State variables 

│   └── Mappings 

└── Events 

    └── Event logs 

The contract is assigned a unique address, and its bytecode, state variables, and event logs are stored on the blockchain.

4.3 Contract Verification: To enhance transparency and trust, it’s common practice to verify the deployed contract’s source code on blockchain explorers like Etherscan. This allows anyone to review the contract’s code and ensure it matches the deployed bytecode. Here’s an example command to verify a contract using Hardhat:

npx hardhat verify --network mainnet DEPLOYED_CONTRACT_ADDRESS "Constructor Arg 1" 

By verifying the contract, we provide transparency and allow users to audit the contract’s functionality.

This sequence diagram illustrates the contract deployment process, from sending the contract creation transaction to verifying the contract’s source code on a blockchain explorer.

5. Blockchain Explorer View

After deploying our contracts, we can view them on a blockchain explorer like Etherscan. The explorer provides a user-friendly interface to interact with the contracts and view their details. Here’s an example of what our deployed contracts might look like on Etherscan:

Contract: HighLowBetGame (0xabcd...) 

├── Contract Creation 

│   ├── Transaction Hash: 0x123... 

│   ├── Block: 12345678 

│   └── Timestamp: 2023-12-25 12:00:00 

├── Contract Code 

│   ├── Verified Source Code 

│   └── ABI 

├── Transactions 

│   ├── Function Calls 

│   └── Event Logs 

└── State & Statistics 

    ├── Token Balance 

    ├── Total Transactions 

    └── Gas Usage 

The explorer displays information such as the contract’s creation details, verified source code, ABI, transactions, and state variables. This transparency allows users to inspect the contract’s behavior and interact with it directly from the explorer interface.

6. Post-Deployment Setup

After deploying our contracts, we’ll need to perform some post-deployment setup to ensure they are properly configured and ready for use. Here’s an example of what this setup might look like:

async function initializeContract(gameContract) { 

    // Set max bet size 

    await gameContract.setMaxBetSize( 

        ethers.utils.parseEther("100") 

    ); 

 

    // Grant MANAGER_ROLE to additional addresses 

    const MANAGER_ROLE = await gameContract.MANAGER_ROLE(); 

    await gameContract.grantRole(MANAGER_ROLE, managerAddress); 

 

    // Initial token allocation 

    await tokenContract.mint( 

        gameContract.address, 

        initialTokenSupply 

    ); 

} 

In this example, we set the maximum bet size, grant the MANAGER_ROLE to additional addresses, and perform an initial token allocation to the game contract. These setup steps ensure that our contracts are properly configured and ready for users to interact with.

With our smart contracts deployed and set up, we’re ready to move on to building the frontend of our soccer prediction game.

Setting up the Frontend Application with MetaMask

To allow users to interact with our smart contracts, we’ll build a frontend application that integrates with MetaMask. MetaMask is a popular browser extension that enables users to manage their Ethereum wallets and interact with decentralized applications.

Let’s start by setting up the basic structure of our frontend application:

window.addEventListener('load', async function () { 

  if (web3_check_metamask()) { 

    const web3 = new Web3(window.ethereum); 

    const accounts = await web3.eth.getAccounts(); 

    if (accounts != undefined && accounts.length > 0) { 

      setLoginName(accounts[0]); 

      const stcBalance = await getSTCBalance(web3, accounts[0]); 

      setSTCBalance(stcBalance); 

      // ... initialization code ... 

    } 

  } 

}); 

 

function web3_check_metamask() { 

    if (!window.ethereum) { 

        console.error('MetaMask extension not detected'); 

        return false; 

    } 

    return true; 

} 

In this code snippet, we add an event listener to the window object that triggers when the page loads. We first check if MetaMask is installed by calling the web3_check_metamask function. If MetaMask is detected, we create a new Web3 instance using the window.ethereum provider, which allows us to interact with the Ethereum blockchain.

We then retrieve the user’s Ethereum accounts using web3.eth.getAccounts(). If an account is found, we update the user interface with the account address and fetch the user’s STC token balance.

Here are some key frontend features we’ll implement:

1. MetaMask Connection: We’ll provide a “Connect” button that allows users to connect their MetaMask wallet to our application. When clicked, it will trigger the MetaMask extension to prompt the user for permission to access their accounts.

document.getElementById("login")?.addEventListener("click", async function (event) { 

    event.preventDefault(); 

    if (web3_check_metamask()) { 

        const web3 = new Web3(window.ethereum); 

        await window.ethereum.request({ method: 'eth_requestAccounts' }); 

        // ... account handling ... 

    } 

}); 

This code adds a click event listener to the “Connect” button. When clicked, it checks if MetaMask is installed and requests access to the user’s accounts using ethereum.request({ method: ‘eth_requestAccounts’ }). Once the user grants permission, we can handle the connected account and update the UI accordingly.

2. Betting Interface: We’ll create an interface that allows users to place bets on soccer matches. The interface will display a list of available matches and provide input fields for selecting the team and entering the bet amount.

jQuery("#matches").on("click", ".button--bet", async function (event) { 

    const gameId = jQuery(event.currentTarget).data("gameid"); 

    const team = jQuery(event.currentTarget).data("gameteam"); 

    const amount = amountInput.val(); 

     

    const HighLowBetGame = new web3.eth.Contract(HIGHLOWBETGAME_ABI, HIGHLOWBETGAME_ADDRESS); 

    const txResult = await HighLowBetGame.methods.PlaceBet(amount, gameId, team == "AWAYTEAM" ? 1 : 0) 

        .send({ from: window.activeAccount, gas: 3000000 }); 

}); 

In this example, when the user clicks the “Place Bet” button, we retrieve the selected game ID, team, and bet amount from the interface. We then create a new instance of the HighLowBetGame contract using the contract’s ABI and address.

Finally, we call the PlaceBet function on the contract, passing in the necessary parameters and sending the transaction from the user’s active account. The send function prompts MetaMask to confirm the transaction and pay the associated gas fees.

These are just a few examples of how we can integrate MetaMask and interact with our smart contracts from the frontend application. We’ll also implement features like displaying the user’s token balance, updating the UI based on contract events, and handling transaction confirmations and errors.

Connecting the Frontend to Smart Contracts

To enable our frontend application to interact with the deployed smart contracts, we need to establish a connection between them. This is where the Application Binary Interface (ABI) comes into play.

1. Understanding ABI (Application Binary Interface)

The ABI is a crucial component that facilitates communication between our frontend application and the smart contracts. It serves as a contract specification, defining the following:

• The functions available in the contract
• The parameters each function accepts
• The data types of the function parameters and return values

Here’s an example of what an ABI structure might look like:

const HIGHLOWBETGAME_ABI = [ 

    { 

        "inputs": [ 

            { 

                "name": "_tokenAmount", 

                "type": "uint256" 

            }, 

            { 

                "name": "_gameId", 

                "type": "uint256" 

            }, 

            { 

                "name": "_betTeam", 

                "type": "uint8" 

            } 

        ], 

        "name": "PlaceBet", 

        "outputs": [], 

        "stateMutability": "nonpayable", 

        "type": "function" 

    }, 

    // ... other function definitions 

]; 

In this example, we define the ABI for the HighLowBetGame contract. The ABI is an array of objects, where each object represents a function or event in the contract. The PlaceBet function, for instance, is defined with its input parameters, their names, and types. The ABI also specifies that the function doesn’t return any output and is marked as “nonpayable,” meaning it modifies the contract state.

The ABI is generated automatically when we compile our smart contracts using tools like Truffle or Hardhat. It is typically stored in a JSON file and includes the following information:

• Function signatures
• Event definitions
• Parameter types
• Return value types

2. Contract Initialization

To interact with our deployed contracts from the frontend, we need to initialize them using their respective ABIs and addresses. Here’s an example of how we can initialize our contracts:

const HighLowBetGame = new web3.eth.Contract(HIGHLOWBETGAME_ABI, HIGHLOWBETGAME_ADDRESS);

const stcContract = new web3.eth.Contract(STC_ABI, STC_ADDRESS);

In this code snippet, we create new instances of the HighLowBetGame and SaigonTechCoin contracts using the web3.eth.Contract constructor. We pass in the corresponding ABI and contract address for each contract.

The HIGHLOWBETGAME_ABI and STC_ABI variables contain the respective contract ABIs, which we can either define directly in our code or import from generated JSON files. The HIGHLOWBETGAME_ADDRESS and STC_ADDRESS variables hold the deployed contract addresses on the blockchain.

3. Implementing Game Features

With our contracts initialized, we can now implement various game features in our frontend application. Here are a few examples:

Token Management

To manage the STC tokens, we can use the SaigonTechCoin contract instance to interact with the token functions:

async function getSTCBalance(web3, account) { 

    const stcContract = new web3.eth.Contract(STC_ABI, STC_ADDRESS); 

    const stcBalance = await stcContract.methods.balanceOf(account).call(); 

    return stcBalance; 

} 

 

// Top-up functionality 

document.getElementById("topupSubmit").addEventListener("click", async function (event) { 

    const stcValue = document.getElementById("topupAmount").value; 

    const txResult = await stcContract.methods.TopUp().send({  

        from: window.activeAccount,  

        value: stcValue * web3.utils.toWei('1', 'gwei'),  

        gas: 3000000  

    }); 

     

    // Approve game contract to spend tokens 

    const txapproveResult = await stcContract.methods 

        .approve(HIGHLOWBETGAME_ADDRESS, stcBalance) 

        .send({ from: window.activeAccount, gas: 3000000 }); 

}); 

In this code, we define a getSTCBalance function that retrieves the STC token balance of a given account using the balanceOf function from the SaigonTechCoin contract.

We also add a click event listener to the “Top-up” button, which allows users to purchase STC tokens. When clicked, it retrieves the top-up amount from an input field, converts it to the appropriate unit (gwei), and calls the TopUp function on the contract, sending the transaction from the user’s active account.

Additionally, we approve the HighLowBetGame contract to spend the user’s STC tokens by calling the approve function on the SaigonTechCoin contract.

Game History and Results

To display the user’s betting history and game results, we can interact with the HighLowBetGame contract and listen for relevant events:

async function loadHistories(web3, resultSet) { 

    const events = await HighLowBetGame.getPastEvents('BetPlaced', { 

        fromBlock: 0, 

        toBlock: 'latest', 

        filter: { _owner: window.activeAccount } 

    }); 

 

    const games = {}; 

    events.forEach((event) => { 

        const team = event.returnValues._betTeam == 1 ? "Away Team" : "Home Team"; 

        if (games[event.returnValues._gameId] == undefined) { 

            games[event.returnValues._gameId] = { 

                amount: 0n, 

                team: team 

            }; 

        } 

        games[event.returnValues._gameId]["amount"] += event.returnValues._tokenAmount; 

    }); 

} 

In this example, we define a loadHistories function that retrieves the user’s betting history by calling the getPastEvents function on the HighLowBetGame contract. We specify the BetPlaced event and provide filters to retrieve only the events relevant to the user’s account.

We then process the retrieved events to construct an object that represents the user’s betting history, storing the bet amount and selected team for each game.

Claiming Prizes

To allow users to claim their prizes after a game is finished, we can interact with the ClaimPrize function of the HighLowBetGame contract:

jQuery("#histories").on("click", ".button--claim", async function (event) { 

    const gameId = jQuery(event.currentTarget).data("gameid"); 

    try { 

        const txResult = await HighLowBetGame.methods.ClaimPrize(gameId) 

            .send({ from: window.activeAccount, gas: 3000000 }); 

        alert('Claim successfully'); 

        setSTCBalance(await getSTCBalance(web3, window.activeAccount)); 

    } catch (error) { 

        alert('Claim failed: ' + error.message); 

    } 

}); 

In this code snippet, we add a click event listener to the “Claim Prize” button associated with each game in the user’s history. When clicked, it retrieves the corresponding game ID and calls the ClaimPrize function on the HighLowBetGame contract, passing in the game ID.

If the transaction is successful, we display a success message and update the user’s STC token balance. If an error occurs, we catch it and display an appropriate error message.

These are just a few examples of how we can interact with our smart contracts from the frontend application to implement various game features. We can extend these functionalities based on the specific requirements of our soccer prediction game.

Testing the Application

Testing is a crucial part of the development process to ensure the correctness and reliability of our application. We’ll focus on testing both the smart contracts and the frontend functionality.

1. Smart Contract Testing

When testing our smart contracts, we’ll cover the following key areas:

// Test scenarios for HighLowBetGame contract 

- Betting functionality 

    - Bet placement within limits 

    - Insufficient balance handling 

    - Multiple bets on same game 

- Result setting 

    - Only manager can set results 

    - Cannot set results twice 

- Prize claiming 

    - Correct prize calculation 

    - Only winners can claim 

    - No double claiming 

We’ll write unit tests to verify the behavior of our smart contracts under different scenarios. Tools like Truffle and Hardhat provide testing frameworks that allow us to write and run tests easily.

Here’s an example of a test case for the betting functionality:

describe("HighLowBetGame", function () { 

    it("should allow placing a bet within the maximum bet size", async function () { 

        const betAmount = 100; 

        const gameId = 1; 

        const betTeam = 0; 

 

        await stcContract.approve(gameContract.address, betAmount); 

        await gameContract.PlaceBet(betAmount, gameId, betTeam); 

 

        const betData = await gameContract.getBetData(gameId, player.address); 

        expect(betData.tokenAmount).to.equal(betAmount); 

        expect(betData.betTeam).to.equal(betTeam); 

    }); 

}); 

In this test case, we approve the HighLowBetGame contract to spend the player’s STC tokens, place a bet within the maximum bet size, and then verify that the bet data stored in the contract matches the expected values.

2. Frontend Testing Checklist

When testing the frontend application, we’ll focus on the following areas:

// MetaMask Connection 

- Check wallet connection 

- Account switching handling 

- Network detection 

 

// Transaction Flow 

- Proper gas estimation 

- Transaction confirmation handling 

- Error message display 

 

// Game Interface 

- Bet placement validation 

- Real-time balance updates 

- Game status updates 

We’ll perform manual testing to ensure that the frontend application integrates correctly with MetaMask and handles various user interactions and edge cases appropriately.

Here’s an example of testing the MetaMask connection:

1. Open the application in a browser with MetaMask installed.
2. Click the “Connect” button to initiate the MetaMask connection.
3. Verify that MetaMask prompts the user to select an account and grant permission.
4. After connecting, check that the user’s account address and token balance are displayed correctly.
5. Switch to a different account in MetaMask and verify that the application updates accordingly.

3. Common Issues and Solutions

During the testing process, we may encounter common issues that need to be addressed. Here are a few examples:

// Handle MetaMask network issues 

function web3_check_metamask() { 

    if (!window.ethereum) { 

        console.error('MetaMask extension not detected'); 

        alert('Please install MetaMask first.'); 

        return false; 

    } 

    return true; 

} 

 

// Handle transaction errors 

try { 

    const txResult = await contract.methods.someFunction().send({ 

        from: window.activeAccount, 

        gas: 3000000 

    }); 

} catch (error) { 

    console.error('Transaction failed:', error); 

    alert('Transaction failed: ' + error.message); 

} 

In the first code snippet, we handle the case where MetaMask is not detected by displaying an appropriate error message and prompting the user to install MetaMask.

In the second code snippet, we wrap the transaction execution in a try-catch block to catch any errors that may occur during the transaction process. If an error is encountered, we log it to the console and display a user-friendly error message.

By addressing common issues and providing informative error messages, we can improve the user experience and make our application more robust.

Conclusion

Congratulations! You have successfully built a complete decentralized soccer prediction game using smart contracts and blockchain technology. Throughout this tutorial, we covered key concepts and techniques, including:

1. Smart Contract Development

• Creating custom ERC20 tokens
• Implementing game logic and betting functionality
• Applying security best practices and measures

2. Frontend Integration

• Building a Web3-enabled frontend application
• Integrating MetaMask for wallet connectivity
• Interacting with smart contracts using Web3.js

3. Best Practices

• Error handling and user-friendly messaging
• Security considerations and auditing
• Gas optimization techniques

Potential Improvements

While our soccer prediction game is fully functional, there are several potential improvements and extensions you can consider:

1. Add support for multiple token types, allowing users to bet with different cryptocurrencies.
2. Implement more advanced betting options, such as live betting or prop bets.
3. Introduce tournament features, enabling users to compete against each other in a leaderboard-style format.
4. Enhance the admin dashboard with more detailed reporting and management functionality.
5. Incorporate real-time odds calculation based on betting volumes and market dynamics.

Next Steps

Now that you have a solid foundation in blockchain development and smart contract programming, you can take your skills to the next level:

1. Deploy your smart contracts to test networks like Ropsten or Rinkeby to gain experience with real-world deployments.
2. Conduct thorough security audits and have your contracts reviewed by experienced developers to identify and fix any potential vulnerabilities.
3. Expand your game with additional features and enhancements based on user feedback and market demand.
4. Implement user analytics and reporting to gain insights into player behavior and preferences.
5. Continuously optimize your smart contracts for gas efficiency to provide a cost-effective user experience.

Remember to refer to the complete source code provided in github and adapt it to your specific requirements. Feel free to extend and modify the codebase to suit your needs.

As you embark on your journey as a blockchain developer, stay curious, experiment with new technologies, and engage with the vibrant blockchain community. Participate in hackathons, contribute to open-source projects, and collaborate with fellow developers to further enhance your skills and knowledge.

Building a decentralized application is an exciting and rewarding endeavor, and this tutorial has equipped you with the tools and knowledge to create your own innovative projects. Whether you choose to launch your own prediction market, develop a new gaming platform, or explore other blockchain use cases, the possibilities are endless.

So go forth, build amazing things, and shape the future of decentralized applications! Happy coding!

References

https://hardhat.org/docs

https://docs.openzeppelin.com/

https://docs.soliditylang.org/en/latest/

Source code

https://github.com/daltonnyx/decentralized-bet-app