DEV Community: Gabriel Temsten

cmdguard-cli: Your Terminal's Safety Net for Risky Commands – Built with GitHub Copilot CLI

Gabriel Temsten — Sun, 15 Feb 2026 00:28:45 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

cmdguard-cli is a lightweight, standalone Node.js CLI tool that acts as a "safety preview" for potentially dangerous shell commands right in your terminal. Before running something scary like rm -rf node_modules, docker system prune -a --volumes, git push --force, or even chmod 777 ., cmdguard analyzes it for risks (data loss, permission escalation, resource exhaustion, security issues), shows color-coded warnings (red = high risk, yellow = medium, green = low), suggests safer alternatives, and asks for confirmation before executing.

It's simple but powerful: pattern-matching for common dangerous tools (rm, git, docker, dd, sudo, chmod/chown, piped curl/wget), piped input support, and flags like --simulate (explain only) and --rewrite (output safer version). No hooks, no cloud/Slack setup—just install globally and use it inline.

To me, this project means peace of mind in the terminal. I've nuked directories or force-pushed the wrong branch too many times—cmdguard is the quick guardrail I wish existed, especially when experimenting with Copilot-generated scripts or late-night commands.

Demo

Repo: https://github.com/gabrieltemtsen/cmd-guard

NPM: https://www.npmjs.com/package/cmdguard-cli (install with npm i -g cmdguard-cli)
https://raw.githubusercontent.com/gabrieltemtsen/cmd-guard/feature/readme-walkthrough-video/public/cmd-guard-demo-ezgif.com-optimize.gif

My Experience with GitHub Copilot CLI

GitHub Copilot CLI was the secret weapon that turned this from "cool idea" to shipped MVP in a short sprint. I started with a single descriptive prompt outlining the core idea (CLI structure, commander for args, chalk for colors, child_process for exec, risk patterns), and it generated a solid plan + initial files (package.json, bin/cmdguard.js, analyzer module).Key ways it helped:Rapid scaffolding: One prompt created the CLI parser, stdin handling, and basic execution flow—saved hours of boilerplate.
Smart code generation: Asked it to "implement risk pattern matching for rm/git/docker commands with suggestions" → got clean, modular functions I could iterate on.
Debugging & iteration: When piped input broke or child_process output wasn't captured right, natural language fixes like "add error handling and stdout/stderr streaming" worked instantly.
Testing boost: Prompted for Jest test skeletons → quickly added analyzer.test.js to verify patterns.
Meta-story: Ironically, building a "safety net for commands" (including those Copilot might suggest) using Copilot CLI itself felt poetic—agentic loops for reasoning about risks, then applying them to the tool.

Without Copilot CLI, this would have taken days of manual grinding. With it, I focused on refining UX (colors, emojis, clear prompts) and adding the challenge's "how it enhances dev process" narrative. The interactive session (plan → approve files → iterate) made building feel collaborative and fast.Thanks to the GitHub team and DEV community for this challenge—excited to see what everyone built!

Unlocking the Power of Trust: Union Finance-Credit Protocol Explained

Gabriel Temsten — Fri, 25 Aug 2023 10:05:23 +0000

One protocol stands out as a beacon of confidence in the ever-evolving world of Web3 and DeFi, where creativity knows no bounds: the Union Credit Protocol. Let's set out on a trip to discover Union Credit's magic and how it's transforming credit networks if you're fresh to the world of blockchain and decentralised finance.

The Essence of Credit

At its core, credit is simply the act of lending money to someone with the expectation that it will be paid back, often with interest. In the realm of DeFi, this concept is taken to a whole new level. Typically, DeFi systems require collateral to secure loans. However, Union Credit Protocol introduces a game-changing concept – unsecured or undercollateralized credit, where trust takes center stage. Here's how it all works.

Trusting in the Digital Realm

Union Credit Protocol is essentially a trust-based credit network that operates on smart contracts within the Ethereum blockchain. Unlike traditional finance, where collateral is king, Union Credit Protocol extends credit to individuals based on trust

The Mechanism Unveiled

Creating Trust: Imagine you have an Ethereum address. In the world of Union Credit, you vouch for this address by specifying an amount of trust. This trust forms the basis for credit within the protocol.
Borrowing Against Trust: Now, the address you've vouched for can borrow funds within the Union Credit Protocol. No collateral, just trust. This is where the magic begins.
The Web of Trust: Credit within Union Finance is powered by a web of trust. Multiple members vouch for an address by depositing tokens (like DAI) into the protocol. The amount they vouch for directly impacts the credit limit of the address they're endorsing.

Let's dive deeper into how this fascinating protocol works.

The Union Credit Protocol in Action

The Union Protocol serves as a coordination mechanism that allows any Ethereum address to accumulate a credit line on-chain in a permissionless and crypto-native manner. Here's a breakdown of its key components:

User Manager: This protocol manages user stakes and registers addresses eligible to interact with the system as members.
uToken: uToken governs who can borrow and how much they can borrow. It also keeps tabs on interest rates.
Staking Trust: Users stake their tokens (e.g DAI) into the protocol, setting the amount they trust for specific addresses. For instance, you could stake 100 DAI and vouch for Jordan's address with 1 DAI. The vouch amount is the minimum of your stake or the trust you set, ensuring precision and security.
Credit Dynamics: Unlike traditional credit systems, where you default after a certain period, Union Credit considers you in default the moment you borrow. This dynamic approach keeps things transparent and efficient, with ongoing interest rates reflecting real-time borrowing conditions.

The Union Credit Protocol is an exciting evolution in DeFi, where trust becomes the new collateral. It's a testament to the innovative spirit of the blockchain world, where conventional financial systems are reimagined, and new possibilities are constantly unlocked. As you delve deeper into the Web3 ecosystem, keep an eye on Union Finance – it's at the forefront of reshaping how we think about credit in the digital age. Trust has found its new home in the Union Credit Protocol, and the future of finance is brighter because of it.

How to create a Lottery Mobile dApp on Celo using react-native(with expo)

Gabriel Temsten — Tue, 09 May 2023 14:28:38 +0000

Introduction

We now rely heavily on mobile applications in our daily lives. Mobile decentralised applications (dApps) have grown in popularity since the introduction of blockchain technology. A mobile-first strategy is offered by Celo, a blockchain platform that promises to make financial tools available to everyone. In this tutorial, we'll develop a Celo mobile dApp using React Native, Expo, and Hardhat.

Overview

In this tutorial, you will learn how to build a mobile dApp using React Native with Expo and Hardhat, and how to deploy a smart contract to the Celo blockchain network. The tutorial will cover the following steps:

Install Expo and create a new React Native project (bootstrapped from celo composer) to set up the development environment.
Install the necessary dependencies, such as Hardhat and the Celo SDK.
Using Hardhat, create a straightforward smart contract and publish it to the Celo network.
Build a basic React Native app that interacts with the deployed smart contract to display the user's token balance and play the lottery.
Test the mobile dApp using Expo.

Prerequisite

Before we dive into building the Celo mobile dApp, here are some prerequisites that you should be familiar with:

Basic knowledge of React Native and Solidity programming languages.
Install the latest version of Node.js and npm on your computer.
Install Hardhat, You can install it globally by running
npm install -g hardhat.
Install the Celo CLI, You can install it globally by running npm install -g @celo/cli.
Install Expo CLI, You can install it globally by running npm install -g expo-cli.
An understanding of the Celo blockchain network and the Celo SDK. You can find more information in the Celo documentation.

Step 1: Initialise your project using Celo CLI

Open up your terminal inside a directory of your choice create the project using npx @celo/celo-composer@latest create
Follow up the prompt in the image below:

Step 2: Writing the Lottery smart contract

cd into the newly created project, navigate to hardhat:

cd celo-mobile-lottery
cd packages
cd hardhat

Open the folder in your preferred code editor, open the contracts folder and create a solidity file name it Lottery.sol paste the code below in it.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;


contract Lottery {
    address public manager;
    uint256 public ticketPrice;
    bool public isOpened;
    address public winner;

    address[] public players;

    constructor () {
        manager = msg.sender;
        ticketPrice = 1 ether;
        isOpened = true;
    }

    function playLottery() public payable returns(bool) {
        require(msg.value == ticketPrice, "Invalid Bet Price");
        players.push(msg.sender);        
        return true;

    }
    function getRandomNumber() internal view returns(uint256 randomNumber) {
        randomNumber = block.timestamp;
    }
    function openLottery() public  returns(bool) {
        isOpened = true;
        return isOpened;
    }
    function CloseLottery() public returns(bool){
        require(isOpened == true, "Already closed!");
         uint256 winnerIndex = getRandomNumber() % players.length;
         address lotteryWinner = players[winnerIndex];
         winner = lotteryWinner;
         uint256 pool = address(this).balance;
        payable(lotteryWinner).transfer(pool);
        isOpened = false;
        return true;


    }
    function getNumberOfPlayers() public view returns(uint){
        return players.length;
    }

   function getLotteryBalance() public view returns(uint256) {
       return address(this).balance;
   }

}

Here’s an overview of what’s happening in the code above :
Contract:

The contract represents a lottery system where users can place bets and a winner is selected randomly.

The state variables:

manager: Stores the address of the contract manager or the address that deploys the contract.
ticketPrice: Represents the price of a single ticket in ether(cUSD).
isOpened: Indicates whether the lottery is currently open for participation.
winner: Stores the address of the winner of the lottery.
players: An array that keeps track of all the participants in the lottery. Constructor:
The constructor function is executed when the contract is deployed.
It initializes the manager variable with the address of the contract deployer.
Sets the ticketPrice to 1 ether.
Sets the isOpened variable to true.

The Functions () :
The playLottery() function allows users to participate in the lottery by sending the required ticket price in Ether. The getRandomNumber() function generates a random number based on the current timestamp. The openLottery() function opens the lottery for participation. The CloseLottery() function closes the lottery, selects a random winner, transfers the contract balance to the winner, and marks the lottery as closed. The getNumberOfPlayers() function returns the number of participants in the lottery. The getLotteryBalance() function retrieves the current balance of the lottery contract. These functions collectively facilitate the operation of the lottery system, including ticket purchase, winner selection, and retrieving relevant information such as the number of participants and the contract balance.

Step 3: Deploy the smart contract on celo

Create a .env file in the hardhat root directory, get your private key from your metamask wallet.
Declare a variable PRIVATE_KEY and initialise it with the private key gotten from your metamask wallet.
NB: Before you proceed make sure to get some Alfajores Testnet in your metamask from the Celo Testnet Faucets. To connect your metamask to the testnet you can check Here.
Open your terminal in the hardhat directory compile the lottery contract using npx hardhat compile.
To deploy the contract to the alfajores Celo Testnet :
npx hardhat deploy --network alfajores
Expected Output:

Welldone! we have our lottery contract deployed on the celo testnet.
From your file structure you'd notice there is a deployments folder created after we deployed our contract, navigate to the folder deployments/alfajores/ then copy the the Lottery.json file. Go back to the root directory of our project (outside the hardhat folder).
Enter the react-native folder, create a folder contracts and paste our copied file there.

Step 4: Editing the lottery User interface

Within the react-native folder, go to screens and rename the Docs.tsx file to Home.tsx and replace the code with the code below:

import { SafeAreaView } from "react-native-safe-area-context";
import Container from "../components/Container";
import { H1, H2, H3, H4, H5, H6 } from "../components/Headings";
import MonoText from "../components/MonoText";
import { Text, View } from "../components/Themed";
import Colors from "../constants/Colors";
import { Button } from "react-native";
import * as LotteryContract from "../contracts/Lottery.json"
import { useWalletConnect } from "@walletconnect/react-native-dapp";
import { useEffect, useState } from "react";
import Web3 from "web3";

const web3 = new Web3("https://alfajores-forno.celo-testnet.org");

const Home = () => {

    const abi = LotteryContract.abi;
    const lotteryAddress = LotteryContract.address;

    const connector = useWalletConnect();
    const [lotteryPool, setLotteryPool] = useState('');
    const [winner, setWinner] = useState("Naan");
    const [lotteryBets, setLotteryBets] = useState('');
    const [lotteryStatus, setLotteryStatus] = useState(true);
    const contract = LotteryContract
    ? new web3.eth.Contract(abi, lotteryAddress)
    : null;

    const placeBets = async () => {

        try {
            let txData = await contract?.methods
                .playLottery()
                .encodeABI();

            await connector.sendTransaction({
                from: connector.accounts[0],
                to: lotteryAddress,
                data: txData,
                value: web3.utils.toWei('1', 'ether'),
            });
        } catch (e) {
            console.log(e);
        } finally {
            return
        }
    };

    const openLottery = async () => {

        try {
            let txData = await contract?.methods
                .openLottery()
                .encodeABI();

            await connector.sendTransaction({
                from: connector.accounts[0],
                to: lotteryAddress,
                data: txData,
            });
        } catch (e) {
            console.log(e);
        } finally {
            return
        }
    };

    const closeLottery = async () => {

        try {
            let txData = await contract?.methods
                .CloseLottery()
                .encodeABI();

            await connector.sendTransaction({
                from: connector.accounts[0],
                to: lotteryAddress,
                data: txData,
            });
            getLotteryStatus();
            alert('Lottery closed! winner selected')
        } catch (e) {
            console.log(e);
        } finally {
            return
        }
    };

    const getLotteryPool = async () => {

        try {
            const result = (await contract?.methods.getLotteryBalance().call());
           const pool =  web3.utils.fromWei(result, 'ether');
            setLotteryPool(pool);
        } catch (e) {
            console.log(e);
        } finally {
            return
        }
    };
    const getLotteryBets = async () => {

        try {
            const result = (await contract?.methods.getNumberOfPlayers().call()) as string;

            setLotteryBets(result);
        } catch (e) {
            console.log(e);
        } finally {
            return
        }
    };
    const getLotteryWiner = async () => {

        try {
            const result = (await contract?.methods.winner().call()) as string;

            setWinner(result);
        } catch (e) {
            console.log(e);
        } finally {
            return
        }
    };
    const getLotteryStatus = async () => {

        try {
            const result = (await contract?.methods.isOpened().call()) as boolean;

            setLotteryStatus(result);
        } catch (e) {
            console.log(e);
        } finally {
            return
        }
    };
    useEffect(() => {
        getLotteryPool();
        getLotteryBets();
        getLotteryStatus();
        if(!lotteryStatus) {
            getLotteryWiner();
        }
    }, [lotteryPool, lotteryBets, lotteryStatus]);



    return (
        <View
            style={{
                height: "100%",
                padding: 10,
            }}
        >
            <View
                style={{
                    flex: 1,
                    margin: 1,
                    alignItems: "center",
                    justifyContent: "center",
                    borderRadius: 10,
                }}
            >
                <H4
                    additionalStyles={{
                        marginTop: -90,
                        fontFamily: "Inter-Medium",
                    }}
                >
                   Play and Win Lottery on Celo
                </H4>
                <Container style={{ marginTop: 15 }}>
                    <MonoText
                        additionalStyles={{
                            textAlign: "center",
                            color: Colors.brand.brown,
                            fontSize: 13,
                        }}
                    >
                        {
                            `Lottery Pool: ${lotteryPool} cUSD\n`
                        }

                        {
                            "Lottery Price: 1 cUSD "
                        }
                    </MonoText>
                </Container>

                <Container style={{ marginBottom: 215 }}>
                    <MonoText
                        additionalStyles={{
                            textAlign: "center",
                            color: Colors.brand.brown,
                            fontSize: 13,
                        }}
                    >
                        {
                            `Lottery Bets:  ${lotteryBets} \n`
                        }

                        {
                          ` Latest Lottery Winner: ${winner} \n`
                        }
                         {
                            `Lottery Status: ${lotteryStatus ? 'Inprogress': 'Closed'} `
                        }
                    </MonoText>
                    <Container style={{ marginTop: 15 }}>
                    <Button onPress={placeBets}   title={`Place Bets (1 cUSD)`}></Button>

                    </Container>
                </Container>

                <View style={{backgroundColor: 'yellow', marginTop: 1}}>
                    <Button onPress={closeLottery}  color={'red'} title={`close lottery`}></Button>

                </View>
                <View  style={{marginTop: 5}}>
                    <Button onPress={openLottery}   title={`Open Lottery`}></Button>
                </View>





            </View>
        </View>
    );
};

export default Home;

Here’s an overview of what’s happening in the code above :

It is a component of a React Native application that communicates with our lottery smart contract, which is running on the Celo blockchain. It has a number of hooks and functions that handle contract interaction and control application state.

We import several React Native components along with custom ones like Container, Headings, and MonoText.
In order to communicate with the Celo blockchain, we additionally import the LotteryContract and set up a web3 instance.
The primary screen of the application is represented by the Home functional component, which is defined.
A few functions inside the Home component communicate with the smart contract such as:
placeBets: Calls the playLottery method while
passing the necessary information and value to send a
transaction to the smart contract to take part in the
lottery.
Invoking the openLottery method sends a
transaction to the smart contract to start the
lottery.
Invoking the CloseLottery method sends a
transaction to the smart contract to halt the lottery.
Additionally,when the lottery is closed, a warning is
displayed and the application status is updated.
These functions, getLotteryPool,
getLotteryBets, getLotteryWinner, and
getLotteryStatus, obtain data from the smart
contract, including the balance of the lottery pool,
the number of bets, the lottery winner, and the
lottery's status.
The lottery pool balance, total number of bets, and lottery status are automatically fetched when the component mounts using the useEffect hook. It also retrieves the winner if the lottery is closed.
To show and interact with the lottery data, the Home component creates a view with a variety of elements, including headings, text, and buttons.

Overall, it functions as the user interface for a lottery application, enabling users to take part, examine lottery data, and conduct operations like placing bets, launching the lottery, and shutting it.

Sure you'd be seeing some errors already, don't panic- it's because we renamed the Docs file, next we'd have to change all instances where Docs was initiated / declared.

Step 5: Adding React-Navigation Screen for the lottery

Head over to the Navigation folder open the index.tsx folder and replace the code with the below:

/**
 * If you are not familiar with React Navigation, refer to the "Fundamentals" guide:
 * https://reactnavigation.org/docs/getting-started
 *
 */
import { SafeAreaProvider } from "react-native-safe-area-context";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {
    NavigationContainer,
    DefaultTheme,
    DarkTheme,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import * as React from "react";
import { ColorSchemeName, Button } from "react-native";
import { useWalletConnect } from "@walletconnect/react-native-dapp";
import Colors from "../constants/Colors";
import useColorScheme from "../hooks/useColorScheme";
import ModalScreen from "../screens/ModalScreen";
import NotFoundScreen from "../screens/NotFoundScreen";
import { RootStackParamList, RootTabParamList } from "../types";
import LinkingConfiguration from "./LinkingConfiguration";
import LoginScreen from "../screens/LoginScreen";
// import deployedContracts from "@celo-composer/hardhat/deployments/hardhat_contracts.json";
import Account from "../screens/Account";
import Home from "../screens/Home";

export default function Navigation({
    colorScheme,
}: {
    colorScheme: ColorSchemeName;
}) {
    return (
        <NavigationContainer
            linking={LinkingConfiguration}
            theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
        >
            <RootNavigator />
        </NavigationContainer>
    );
}

/**
 * A root stack navigator is often used for displaying modals on top of all other content.
 * https://reactnavigation.org/docs/modal
 */
const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
    const connector = useWalletConnect();
    return (
        <Stack.Navigator>
            {connector.connected ? (
                <Stack.Screen
                    name="Root"
                    // the Root path renders the component mentioned below.
                    component={BottomTabNavigator}
                    options={{ headerShown: false }}
                />
            ) : (
                <Stack.Screen
                    name="Root"
                    component={LoginScreen}
                    options={{ headerShown: false }}
                />
            )}
            <Stack.Screen
                name="NotFound"
                component={NotFoundScreen}
                options={{ title: "Oops!" }}
            />
            <Stack.Group screenOptions={{ presentation: "modal" }}>
                <Stack.Screen name="Modal" component={ModalScreen} />
            </Stack.Group>
        </Stack.Navigator>
    );
}

/**
 * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */
const BottomTab = createBottomTabNavigator<RootTabParamList>();

function BottomTabNavigator() {
    const theme = useColorScheme();

    // const contracts = deployedContracts["44787"]?.["alfajores"]?.contracts;

    return (
        <SafeAreaProvider>
            <BottomTab.Navigator
                // first screen visible after login
                initialRouteName="Docs"
                screenOptions={{
                    headerShown: false,
                    tabBarActiveTintColor: Colors["brand"].light.text,
                    tabBarActiveBackgroundColor:
                        Colors["brand"][theme].background,
                    tabBarLabelPosition: "beside-icon",
                    tabBarIconStyle: { display: "none" },
                    tabBarLabelStyle: { textAlign: "center" },
                }}
            >
                {/* <BottomTab.Screen
                    name="Greeter"
                    children={(props) => (
                        <Greeter contractData={contracts.Greeter} {...props} />
                    )}
                    options={() => ({
                        title: "Greeter Contract",
                        headerShown: false,
                        // render icons if any
                        tabBarIcon: ({
                            focused: boolean,
                            color: string,
                            size: number,
                        }) => {
                            return <></>;
                        },
                        tabBarLabelPosition: "beside-icon",
                    })}
                />
                <BottomTab.Screen
                    name="Storage"
                    children={(props) => (
                        <Storage contractData={contracts.Storage} {...props} />
                    )}
                    options={{
                        title: "Storage Contract",
                        headerShown: false,
                        tabBarIcon: ({
                            focused: boolean,
                            color: string,
                            size: number,
                        }) => {
                            return <></>;
                        },
                        tabBarLabelPosition: "beside-icon",
                    }}
                /> */}
                <BottomTab.Screen name="Home" component={Home} />
                <BottomTab.Screen
                    name="Account"
                    component={Account}
                    options={() => ({
                        title: "Account",
                        headerShown: false,
                        tabBarIcon: ({
                            focused: boolean,
                            color: string,
                            size: number,
                        }) => {
                            return <></>;
                        },
                        tabBarLabelPosition: "beside-icon",
                    })}
                />
            </BottomTab.Navigator>
        </SafeAreaProvider>
    );
}

code overview: We are setting the Navigation and the screens to be displayed on our mobile lottery dApp (remember we edited the Docs file to => Home file).

We import necessary dependencies, components, and screens from various modules.
The Navigation component is the entry point that wraps the entire app's navigation logic. It uses NavigationContainer from React Navigation and determines the theme based on the provided color scheme.
Inside the Navigation component, there is a RootNavigator component defined as a stack navigator. It checks if the user is connected via WalletConnect. If connected, it renders the BottomTabNavigator component; otherwise, it renders the LoginScreen component.
The RootNavigator also includes a NotFoundScreen component for handling routes not found in the navigation stack and a ModalScreen component for rendering modal screens.
The BottomTabNavigator component represents the bottom tab navigation within the app. It uses the createBottomTabNavigator function to create the navigator.It includes screens like Home and Account to display the main functionality of the app.
Each screen within the BottomTabNavigator has options for customizing its appearance, such as the title, icon, and label position.

Overall, the code sets up the navigation structure for the app, allowing users to navigate between screens using a bottom tab navigation pattern and handle different scenarios such as authentication and error handling.

Also open the linkConfigurations.ts file and replace it with the code below:

/**
 * Learn more about deep linking with React Navigation
 * https://reactnavigation.org/docs/deep-linking
 * https://reactnavigation.org/docs/configuring-links
 */

import { LinkingOptions } from "@react-navigation/native";
import * as Linking from "expo-linking";

import { RootStackParamList } from "../types";

const linking: LinkingOptions<RootStackParamList> = {
    prefixes: [Linking.makeUrl("/")],
    config: {
        screens: {
            Root: {
                screens: {
                    Docs: {
                        screens: {
                            Home: "home",
                        },
                    },
                    Account: {
                        screens: {
                            Account: "account",
                        },
                    },
                },
            },
            Modal: "modal",
            NotFound: "*",
        },
    },
};

export default linking;

Step 6: Testing our Celo Lottery Mobile DApp

Make sure you have the Alfajores app installed in your mobile device. and also create a wallet and collect Testnet funds from the faucet.
Make sure you have the Expo Go app installed on your mobile device.
Open your terminal and enter the following command:

npx expo start

Scan the QR code using your Expo Go application to test the mobile app.
NB: Make sure your pc and mobile device are connected to one Network.
Expected output:
Go ahead and Test our Lottery app:

Connect Your wallet
Place Lottery Bet as many times as you want as far as you have enough Testnet funds, you could also use multiple devices to make the lottery competitive.
Close Lottery- To select a winner and send funds to the winner from the Prize Pool.
reOpend the Lottery.

Have any Question reply to this post or DM me on Twitter for support

Building a Basic Smart Contract and dApp on Celo

Gabriel Temsten — Fri, 10 Mar 2023 07:28:59 +0000

Writing a smart contract can be a daunting task for beginners, but with the right tools and guidance, it can be made simple. In this tutorial, we will walk through how to write a basic smart contract, deploy it on the Celo testnet, and create a decentralized application (dApp) to interact with the contract.

Prerequisites:

Basic programming concepts and JavaScript proficiency
Node.js installed on your computer
Command line experience
Celo wallet set up to obtain testnet tokens
Familiarity with Vue.js and TypeScript

Step 1: Initialize and Install Hardhat Project

The first step is to initialize and install a Hardhat project, which is a development environment for building and testing smart contracts on Ethereum and other EVM-compatible blockchains. To do this, you can follow the official Hardhat documentation to install it on your machine.

Step 2: Write the Smart Contract Once you have set up your Hardhat project, you can start writing your smart contract. For this tutorial, we will create a basic contract called "HelloWorld.sol" that has two public variables: text and name. The user can set the text they want and also set their name on the contract.

To create the contract, you can create a new file called "HelloWorld.sol" in the contracts folder of your Hardhat project and add the following code:

pragma solidity ^0.8.0;

contract HelloWorld {
  string public text;
  string public name;

  function setText(string memory _text) public {
    text = _text;
  }

  function setName(string memory _name) public {
    name = _name;
  }
}

This contract has two public variables, text and name, and two public functions, setText and setName, which allow the user to set the values of the variables.

Step 3: Deploy the Contract on the Celo Testnet

After writing the smart contract, the next step is to deploy it on the Celo testnet. To do this, you can follow the official Celo documentation to set up your Celo account and connect it to your Hardhat project:
hardhatconfig.ts

mport { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";
import * as dotenv from 'dotenv'
dotenv.config();

const PRIVATE_KEY = process.env.PRIVATE_KEY

const config: HardhatUserConfig = {
  solidity: "0.8.17",
  networks:{
    alfajores: {
      url: `https://alfajores-forno.celo-testnet.org`,
      accounts: [PRIVATE_KEY]
    },
  }
};

export default config;

Once you have connected your Celo account to your Hardhat project, you can deploy your contract to the Alfojores Celo network by running the following command in your terminal:

npx hardhat run --network alfajores scripts/deploy.js

This command will deploy your contract to the Alfojores Celo network and give you the address of the deployed contract(make sure to copy and save the contract address).

**Step 4: **Create the dApp for Contract Interaction

The final step is to create a dApp for interacting with the deployed smart contract. For this tutorial, we will create a simple dApp using Vue 3 and TypeScript.

To create the dApp, you can follow the official Vue documentation to set up a new Vue project with TypeScript.
Use this command to Quick start a Vue 3 Appliction

npm create vue@latest
//select Typescript--useRouter--piniaStore--Eslint--Preetier
npm install bootstrap ethers

Check the source code here

After Initiating you Vue application, navigate to src/main.ts to add bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'

*Step 5: * Navigate to src/views/HomeView.vue replace the code below:

<script setup lang="ts">
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { ethers } from 'ethers'
import * as HelloWorldABI from '../contract/HelloWorld.json'

const { ethereum } = window
const contractAddress = '0xF112ba99A3586Ac4b5dA4148c0a03ADD2C6BFA0a'

const setAddress = reactive({
  address: ''
})
const setTexts = reactive({
  setText: '',
  setName: ''
})

const getTexts = reactive({
  getText: '',
  getName: ''
})

const networName = reactive({
  network: ''
})

let connected = ref(false)
onMounted(() => {
  if (!ethereum) {
    connected.value = false
    alert('Make sure you have MetaMask Connected!')
    return
  }
  watchEffect(() => {
    getCurrentText()
    getCurrentName()
  })
})

//connect your Metamask wallet on connect button click
const connectWallet = async () => {
  try {
    // Check if MetaMask is installed
    if (!ethereum) {
      alert('Make sure you have MetaMask Connected!')
      return
    }

    // Get user Metamask Ethereum wallet address
    const accounts = await ethereum.request({
      method: 'eth_requestAccounts'
    })
    setAddress.address = accounts[0]
    const provider = new ethers.providers.Web3Provider(ethereum)
    const network = await provider.getNetwork()
    networName.network = network.name

    console.log(accounts[0])
    connected.value = true
  } catch (error) {
    console.log(error)
  }
}
const getCurrentText = async () => {
  try {
    // Check if User already connected a wallet
    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum)
      const signer = provider.getSigner()

      // Create a contract object
      const contractInstance = new ethers.Contract(contractAddress, HelloWorldABI.abi, signer)

      let text = await contractInstance.getText()
      getTexts.getText = text
    }
  } catch (error) {
    console.log(error)
  }
}
const getCurrentName = async () => {
  try {
    // Check if User already connected a wallet
    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum)
      const signer = provider.getSigner()
      // Create a contract object
      const contractInstance = new ethers.Contract(contractAddress, HelloWorldABI.abi, signer)
      let text = await contractInstance.getName()
      getTexts.getName = text
    }
  } catch (error) {
    console.log(error)
  }
}
const setText = async () => {
  try {
    // Check if User already connected a wallet
    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum)
      const signer = provider.getSigner()

      // Create a contract object
      const contractInstance = new ethers.Contract(contractAddress, HelloWorldABI.abi, signer)

      const setText = await contractInstance.setText(setTexts.setText)
      // Wait for the transaction to be mined
      await setText.wait()
      watchEffect(() => {
        getCurrentText()
        getCurrentName()
      })
      // Display a success message to the user
      alert('Txn successful!')
    }
  } catch (error) {
    console.log(error)
  }
}

const setName = async () => {
  try {
    // Check if User already connected a wallet
    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum)
      const signer = provider.getSigner()

      // Create a contract object
      const contractInstance = new ethers.Contract(contractAddress, HelloWorldABI.abi, signer)

      const setName = await contractInstance.setName(setTexts.setName)
      // Wait for the transaction to be mined
      await setName.wait()
      // Display a success message to the user
      alert('Txn successful!')
      watchEffect(() => {
        getCurrentText()
        getCurrentName()
      })
    }
  } catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <main>
    <div class="text-center">
      <img class="text-center img-thumbnail" src="../assets/celo.png" alt="" />
    </div>
    <div class="text-success textcenter">
      NetWork: <strong>{{ networName.network }}</strong>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-5 pt-1 mb-1">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"></a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
          </ul>

          <button v-if="!connected" @click="connectWallet" class="btn btn-outline-success">
            Connect Wallet
          </button>
          <button v-else class="btn btn-success">{{ setAddress.address }}</button>
        </div>
      </div>
    </nav>
  </main>

  <div class="py-5">
    <div class="card">
      <label class="card-body" for="">BLOCKCHAIN-DATA: </label>
      <p class="card-body">
        Current Text: <strong> {{ getTexts.getText }}</strong>
      </p>
      <p class="card-body">
        Current Name: <strong> {{ getTexts.getName }}</strong>
      </p>
    </div>

    <div class="py-5 global-container">
      <div class="card login-form">
        <div class="card-body">
          <h3 class="card-title text-center">Contract Interaction</h3>
          <div class="card-text">
            <form>
              <div class="form-group">
                <label for="exampleInputEmail1">Set Text</label>
                <input
                  v-model="setTexts.setText"
                  type="text"
                  class="form-control form-control-sm"
                />
                <button @click.prevent="setText" class="btn btn-dark py-1 mt-2">Call</button>
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">Set Name</label>
                <input
                  v-model="setTexts.setName"
                  type="text"
                  class="form-control form-control-sm"
                />
                <button @click.prevent="setName" class="btn btn-dark py-1 mt-2">Call</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.global-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #141313;
}

.form {
  padding-top: 10px;
  font-size: 14px;
  margin-top: 30px;
}

.card-title {
  font-weight: 300;
}

.login-form {
  width: 330px;
  margin: 20px;
}

.sign-up {
  text-align: center;
  padding: 20px 0 0;
}

.alert {
  margin-bottom: -30px;
  font-size: 13px;
  margin-top: 20px;
}
</style>

Edit the styling to the best of your Taste(src/assets/main.ts).
*Note: *
Change the smartContract address in src/views/HomeView.vue with the contract address you got from deploying the HelloWorld contract.

Copy the contract ABI(helloWorld.json) from the contract folder in step 1. then create a folder in your vue application(src/) named contract then paste the json file so you can import it to HomeView.vue for contract interaction.

*Summary of the functions: *
OnMounted() : To initiate a function call when the page reloads.
connectWallet(): To connect a user, using MetaMask.
getCurrentText(): To get the updated text from the contract we deployed earlier.
getCurrentName(): To get the name from the contract earlier deployed.
setText(): To send the transaction to the blockchain(celo Alfajores network) containing the text gotten from the form as an argument.
setName(): To send the transaction to the blockchain(celo Alfajores network) containig the name gotten from the form as an argument.
View the live project here