Forem: Nazeeh Vahora

Exploring the Power of React Server Components and React Suspense

Nazeeh Vahora — Mon, 04 Dec 2023 10:03:01 +0000

React and Next.js have launched many updates this year, and among them, React Server Components and React Suspense have sparked significant discussion in the developer community. If you're not yet familiar, React Server Components allow for more efficient rendering by offloading certain tasks to the server, while React Suspense offers a way to handle asynchronous operations more smoothly in your React applications. Intrigued? Let's dive deeper into these concepts

React Server Components

The essence of React lies in its ability to provide composability and reusable custom building blocks. These components can be used across different parts of an application with minimal need for reconfiguration.

Consider a scenario where you have a Post component. This component takes postId as a prop and fetches and displays post content from an API. Traditionally, this process might look something like this:



const Page = () => {
  return (
    <div>
      <Post postId={"post-1"} />
      <Post postId={"post-2"} />
      <Post postId={"post-3"} />
    </div>
  );
};

const Post = ({ postId }) => {
    useEffect(() => {
         // data fetching from an API using fetch or axios   
     }, [])
  return <>
  // displaying result
  </>;
};

Before Server Components, data fetching was often client-side, leading to visible loading states (like spinners) and reliance on the client's network speed and we used to get data using fetch like below.



const Post = ({ postId }) => {
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState()

    useEffect(() => {
    setLoading(true)
    fetch(`/api/post/${postId}`)
        .then(res => {
            setData(res.data)
        })
    setLoading(false)
    }, [])
  return <>{loading ? <Spinner /> : <div>{data.post}</div>}</>;
};

Using this way of data fetching, when we load our application on the client side, it will be rendered quickly. But once the page is rendered we will see Spinner when the data is being fetched on the client side. The data fetching on the client side may take longer than that depending on the network speed as well.

Now, let's say we want to move data fetching to the server side instead of the client side to avoid having Spinner and dependency on the client's network to fetch the data. In that case, we'll use getServerSideProps and it will look like the below.



export const getServerSideProps = async ({ params }) => {
  const { data } = await sql`SELECT * FROM POSTS WHERE id=${params.id}`;

  return {
    props: {
      data: data.post,
    },
  };
};

const Page = ({ data }) => {
  return (
    <div>
      <Post postData={data} />
    </div>
  );
};

const Post = ({ postData }) => {
  return <div>{postData}</div>;
};

Using this approach, as data is being fetched on the server inside getServerSideProps, when we load the application in the browser, we will see the browser loading state longer than the previous one. The reason is that it is fetching all the data on the server and due to that, we will not see the Spinner on the client side as well after the page has been rendered.

This approach is good and efficient in many ways but it makes our Post component dependent on the getServerSideProps. So, if we want to move our Post component somewhere else or maybe just reuse it elsewhere in a relatively lower child component then it will be dependent on the parent component to fetch and pass data to our Post component. Thus, it loses its composability which was the main feature of React in the first place. You will get more clarity by looking at the diagram below.

As shown in the above diagram, our Post component is not completely composable. Whenever we're trying to reuse it, it is expecting data from the parent component and thus it's dependent on it.

So, how do we make our component composable without being dependent on the server-side API and render it on the server side? Here is where React Server Components come into play. So, let's consider the above code block and make it a server component and also make sure that it is composable.



const ServerCompPost = async ({ postId }) => {
  const { data } = await sql`SELECT * FROM POSTS WHERE id=${postId}`;
  return <div>{data.post}</div>;
};

ServerCompPost is a server-side component, self-sufficient in fetching its data. By default, every component in Nextjs is a server component, thus we don't have to do anything additional here to make it a server component. You can refer to their docs here. Thus, we don't need to copy-paste getServerSideProps at all the places we will be using this component. It is totally composable and self-dependent for its data and doesn't require data to be passed as a prop from the parent component

React Suspense

Now, let's explore how React Suspense can further enhance user experience. Imagine a page rendering numerous <Post /> components and a <SimilarPosts /> component. <SimilarPosts /> is another server component and is fully composable as shown below.



const Page = () => {
  return (
    <div>
      <Post postId={"post-1"} />
      <Post postId={"post-2"} />
      <Post postId={"post-3"} />
      <SimilarPosts />
    </div>
  );
};

Thus, all this data fetching for all the <Post /> components and <SimilarPosts /> components are happening on the server side. Due to that, when we load our page in the browser it's taking a longer time as it is fetching data for all the components. Now, the user is gonna see Similar Posts only when he is going to scroll to the end after all the <Post />. Thus, he may or may not see Similar Posts. So, we can optimize that by server rendering that component only when the user scrolls to the bottom and that component is in the viewport.

We can achieve that using Suspense. We need to wrap our component with the Suspense wrapper and show <Spinner /> as a fallback. Below is the updated code.



const Page = () => {
  return (
    <div>
      <Post postId={"post-1"} />
      <Post postId={"post-2"} />
      <Post postId={"post-3"} />
      <Suspense fallback={<Spinner />}>
        <SimilarPosts />
      </Suspense>
    </div>
  );
};

With Suspense, we defer rendering SimilarPosts until it's actually in view. This not only improves initial load times but also optimizes resources.

Wrapping Up and Looking Ahead

In summary, React Server Components and React Suspense offer powerful ways to optimize both the performance and the user experience of web applications. By leveraging these features, developers can build more efficient, responsive, and user-friendly applications.

As we continue to see advancements in these technologies, it's exciting to imagine how they will shape the future of web development. Have you experimented with these features in your projects? Share your experiences and insights in the comments below!

Testing React Components: The Snapshot & Component Testing in Isolation

Nazeeh Vahora — Mon, 06 Feb 2023 17:05:53 +0000

React is a widely used JavaScript library for building user interfaces and single-page applications. To ensure the quality and reliability of your React code, testing is crucial.

There are two main forms of testing in React: snapshot testing and component testing. Snapshot testing helps detect unexpected changes in your components' output, while component testing using Storybook allows you to verify the behavior and interactions of individual components in isolation. In this article, we will dive into both methods and demonstrate how to implement them in your React projects. Whether you are an experienced React developer or just starting, this guide will provide you with the essential tools and techniques for enhancing your testing process. So, let's get started!

Getting Started

Note: You can refer to this repo for the reference

Initialize the new next app by running npx create-next-app --ts [project name] . Then navigate to your project folder. For this tutorial, we will develop a Button component and add some props to make its properties more dynamic. So, at the root of your project, create a new folder named Components , and in that create another folder named Button. This folder will contain all our files related to the Button component like the actual component, its test, etc. In this folder create a file named Button.tsx. In this file, paste the following code.

import React from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
  hasError?: boolean;
  bg?: string;
  color?: string;
}

const Button: React.FC<ButtonProps> = ({ label, hasError, bg, color, ...props }) => {
  return (
    <button
      {...props}
      style={{ background: bg, color, borderColor: hasError ? "red" : "green" }}
    >
      {label}
    </button>
  );
};

export default Button;

We have defined a Button component and are accepting props to control its properties from the parent component. Let's carry out end-to-end testing of this component using storybook and snapshot testing using jest.

Snapshot testing

Snapshot testing is a helpful tool to ensure that your UI does not change unexpectedly. It helps to render UI, takes a snapshot, then compares it to a reference snapshot. if both snapshots do not match, then either something has been changed or we need to update the snapshot with the new version.

For snapshot testing, we will be using jest. So let's get started with writing tests. But before that, we'll need to add some libs. So run the following command in your project root.

yarn add --dev jest @types/jest ts-jest babel-jest @babel/preset-env @babel/preset-react @babel/preset-typescript react-test-renderer @types/react-test-renderer

Once the above command succeeds, create a new file called babel.config.js in your project root and make sure that it looks like the one below.

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

We've all the prerequisites, let's write our test. For that, create a new file named Button.test.tsx inside the Button folder under Components. In this test file, paste the code below.

import renderer from "react-test-renderer";
import Button from "./Button";

it("renders correctly", () => {
  const tree = renderer
    .create(
      <Button label="Test Button" hasError={false} bg="yellow" color="black" />
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Let's understand the above code. it keyword tells the compiler that this is our test. As the first argument, we can give a short heading to our test which can describe what our test is about. While running the test, we'll get to see these labels in our terminal. Following that, renderer.create will create a DOM of the component supplied, then will convert it to json and will save its snapshot. Every time we'll run our tests expect will match the current snapshot with the existing saved snapshot. And if the snapshot does not match then it will give an error. In such a scenario, if the change was intentional then we will have to update the snapshot or else we will have to fix that unnecessary change.

Now before running the test, add "test": "jest" to the scripts object in your package.json. Let's run this test by running the command yarn run test in your terminal. You should see an output like below in your terminal.

You are running this test for the first time, thus there is not any existing snapshot to compare. As a result, it will save this snapshot and will use this to compare it in the succeeding ones.

Now let's change the bg of our Button to any other color and run the test again. You should see your test failing as shown below.

Now, we have made this change intentionally, so we'll have to update the snapshot with this new one. For that, we will have to run yarn run test --updateSnapshot in our terminal. You should see an output like below in your terminal.

Congrats! You have just introduced snapshot testing to your Component. Just like this you can test every component and make sure that everything works as expected and doesn't break anything in production. Now, let's move toward testing the Component in isolation.

Storybook: Testing in Isolation

Storybook lets us test our components visually and one component at a time. It helps us to document components for reuse and automatically visually test your components to prevent bugs. It also provides addons that help you do things like fine-tune responsive layouts or verify accessibility.

So let's get started by adding storybook to our project. For that run the below command in your root directory.

npx storybook init

Now, let's add Story to our component. Story captures the rendered state of your component. We can have multiple stories for each component, each story will describe a particular supported state of a component.

Let's create stories for our Button component. For that inside the Button folder of components folder, create a file named Button.stories.tsx. In that file, paste the below code.

import Button from "./Button";
import React from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";

export default {
  title: "Button",
  component: Button,
} as ComponentMeta<typeof Button>;
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: "Primary",
  hasError: false,
  bg: "blue",
  color: "white",
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: "Secondary",
  hasError: false,
  bg: "yellow",
  color: "black",
};

export const ChangeColor = () => {
  const [color, setColor] = React.useState("green");
  const clickHandler = () => {
    setColor((prevColor) => (prevColor === "green" ? "yellow" : "green"));
  };

  return (
    <Button
      label="Click to change Color"
      hasError={false}
      bg={color}
      color={"black"}
      onClick={clickHandler}
    />
  );
};

Explanation

Let's understand what's going on in the above code. Firstly we have to write stories according to the Component StoryFormat and an ES6 module-based standard. The key ingredients are the default export which describes the component and the named export which describes the stories. The default export metadata controls how Storybook lists your stories and provides information used by addons. Following the default export, we have defined Template which we will be using as the boilerplate for the following stories and we can just pass more arguments to it using Template.bind({}) and don't repeat the basic boilerplate. To change the properties or to pass an addon of a component, we can define those args using Primary.args = { }, Primary being the name of the extended component, as we've done above.

Now let's see each story of our component visually in our browser. But before that update the path for our stories in .storybook/main.js the file. and make sure that it looks like the one below.

module.exports = {
  "stories": [
    "../Components/**/*.stories.mdx",
    "../Components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

Simultaneously, delete the stories folder in your project root. Now let's run yarn storybook in your terminal.

You should be able to see such a UI in your browser. You can see each defined story for our Button component under the Button label. Try playing along with Controls at the bottom such as changing the label, alternating the value of hasError props, etc, and see the visual change above. Under the Change Color option, try clicking the button, it should change the backgroundColor of the component as defined in the clickHandler.

Thus, Stories helps us to check that UI continues to look correct as you make changes. By viewing these stories without the combination/inflation of other components we can confirm that our UI component is not behaving unexpectedly and is rendering correctly.

This was the brief overview of testing components using jest and storybook\ and thereby you've successfully tested your component in isolations.

Compiling and testing Vyper contract using Foundry

Nazeeh Vahora — Mon, 22 Aug 2022 14:08:00 +0000

In this tutorial, we will use vyper to write our smart contract and Foundry as our Ethereum Development Environment. As we'll be using Foundry, we'll be writing our tests in Solidity.

What is Vyper?

Vyper is a contract-oriented, pythonic programming language that targets the Ethereum Virtual Machine. The aim of vyper is to make smart contract maximally human-readable. Any person with low prior experience with vyper or any particular language should understand vyper.
Vyper follows python3 syntax. Thus, it should be noted that vyper syntax is a valid python3 syntax, however not all python3 syntax is valid in vyper.

Why Foundry?

Hardhat is definitely a nice Ethereum Development Environment but Foundry has some more cool benefits to offer.

Unlike Hardhat, Foundry allows us to write tests as well as scripts in Solidity
Foundry comes with the Forge Standard library, which allows using Dappsys Test to assert values.
We can simply log values using emit_log(string), emit_int(int_value), emit_uint(uint_value), emit_address(address_value), etc. to log values of different data types
To get more detailed information on the tests, we can simply use the -v flag after the test command. More the number of v will give us more detailed info. Example: forge test -vvv. We can add up to five v flags.
We can mock a user (or we can say an account) using .prank and .startPrank.
We can set nounce, block number, and timestamp for an account.
Foundry gives us the detailed gas report for our tests by running the below command. ```shell

forge test --gas-report

- Foundry provides us **Fuzzing** that allows us to define parameters for our test function and it will populate those parameters values on runtime

### Getting Started
Create a new project using Foundry by running the following command.

> Note: You can install and get vyper and foundry running locally by following [vyper](https://vyper.readthedocs.io/en/stable/installing-vyper.html) and [foundry](https://book.getfoundry.sh/getting-started/installation.html) docs.

> You can refer to [this](https://github.com/Nazeeh21/vyper-foundry) repo to follow along.

```sh


forge init vyper_foundry
cd vyper_foundry

Note: If you want to know and understand more about foundry and its structure, please refer to this article.

We have foundry up and running, let's write smart contract using Vyper. Navigate to the src folder in your root directory and rename Contract.sol to CountContract.vy as we will be writing our Contract in vyper. Paste the below Contract into that file.



count: public(uint256)

@external
def __init__(_count: uint256):
    self.count = 1

@external
def setCount(_count: uint256):
    self.count = _count

@external
def increment():
    self.count += 1

@external
def decrement():
    self.count -= 1

@external
def getCount() -> uint256: 
    return self.count

Let me give a quick overview of our Contract. We have defined a count variable that keeps track of our count. We have defined functions that lets us increment, decrement, set and get the value of our count variable. The __init__ function we have defined will run as a constructor for our contract, where we are setting the value for our count variable by taking it as an argument. Vyper follows Python3 syntax thus it's really easy to write and understand the smart contract.

Compiling vyper contracts

As we've written our smart contract, let's compile our smart contract. We can compile our smart contract written in vyper by running the following command in our terminal.



vyper src/CountContract.vy

You should see the following output in your terminal. This is the bytecode of our Contract.

We are able to compile our Contract, but how we'll be able to compile it using foundry because foundry doesn't have a default script for compiling vyper contracts? For that, we'll be using ffi from foundry. ffi allows us to call an arbitrary command in foundry if enabled. Thus, using this feature we'll run vyper src/CountContract.vy command. So let's write a deployer contract that allows us to deploy our contract. Navigate to the root dir of our project and create a new folder named utils and under that create vyperDeployer.sol file. Paste the following code from below into that file.

As you can see, on lines 21 and 50, we've defined the deployContract function which we'll use to deploy our vyper contract. The first function defined on line 21 will get executed when we don't need to pass arguments to the contract's constructor otherwise we'll use the second function defined on line 50 when we need to pass arguments to our contract's constructor. Both these functions will return an address at which our contract will get deployed.

We have our deployer contract ready. So let's write tests for our smart contract. But before writing our test, we need an interface to interact with our vyper contract. This will allow Foundry to interact with your Vyper contract, enabling the full testing capabilities that Foundry has to offer. For that, create an interface folder inside the test directory and inside interface create a file named ICountContract.sol. In this file, paste the code below.



// SPDX-License-Identifier: MIT
pragma solidity >=0.8.13;

interface ICountContract {
    function setCount(uint256 _count) external;

    function increment() external;

    function decrement() external;

    function getCount() external returns (uint256);
}

We'll use this interface to interact with our CountContract. We've our interface ready, so let's write tests for it in the Contract.t.sol file inside the test directory. For that, paste the below code in that file.



// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

import "forge-std/Test.sol";
import "../utils/vyperDeployer.sol";
import "./interface/ICountContract.sol";

contract ContractTest is Test {
    VyperDeployer deployer = new VyperDeployer();
    ICountContract countContract;

    function setUp() public {
        countContract = ICountContract(deployer.deployContract('CountContract', abi.encode(1)));
    }

    function testIncrement() public {
        assertEq(countContract.getCount(), 1);
        countContract.increment();
        assertEq(countContract.getCount(), 2);
    }

    function testDecrement() public {
        assertEq(countContract.getCount(), 1);
        countContract.decrement();
        assertEq(countContract.getCount(), 0);
    }

    function testSetCount() public {
        assertEq(countContract.getCount(), 1);
        countContract.setCount(5);
        assertEq(countContract.getCount(), 5);
    }
}

As you can see, in our setUp() function, we are deploying a new instance of our CountContract and as a second argument to our deployContract method from our deployer, we are passing abi.encode(1). This value will be passed as an argument to our constructor. Thus, the default value for our count variable in our contract will be 1 and we will be asserting values for our tests on the basis of this initial value.

Let's understand what is happening here and how our deployer works. We are creating a new instance of VyperDepolyer and we're calling the deployer.deployContract(fileName) method and we're passing the name of the contract we want to deploy. Our contract requires constructor arguments so we'll pass them in the abi encoded representation of the arguments which looks like this deployer.deployContract('CountContract', abi.encode(1)). The deployContract function compiles the Vyper contract and deploys the newly compiled bytecode, returning the address that the contract was deployed to. The deployed address is then used to initialize the ICountContract interface. Once the interface has been initialized, your Vyper contract can be used within Foundry like any other Solidity contract.

Now, we have everything ready required for our vyper contract. So, now let's run the tests and see how it goes. Run the following command in your terminal for that.



forge test

You should see an error like below in your terminal

The reason for this is that we have not enabled ffi in the foundry. To enable that we should run our test command with the ffi flag. So now run the following command.



forge test --ffi

Now, you should see all our tests passing in our terminal as shown below

Deploying a vyper contract

Once you are done with writing and testing the vyper contract, you can deploy it to any network of your choice.

The first option is to take the bytecode generated by the vyper compiler and manually deploy it through mist or geth.



vyper yourFileName.vy
# returns bytecode

Second option is to take the byte code and ABI and deploy it with your current browser on myetherwallet’s contract menu.



vyper -f abi yourFileName.vy
# returns ABI

This way you can write, test and deploy your vyper contract starting from scratch.

Congratulations! 🎉🎉🎉 You have just written a vyper contract and wrote tests and deploy scripts for it in foundry.

A huge shoutout to 0xKitsune for developing this setup and helping out with this article.

Writing And Deploying Smart Contracts Using Foundry & Thirdweb Deploy

Nazeeh Vahora — Mon, 25 Jul 2022 15:55:35 +0000

In this tutorial, we will discuss how using Foundry we can develop a Smart Contract, write tests for it and deploy our Smart Contract to the blockchain using thirdweb deploy.

Tools and tech stack we'll be using:

Solidity
Foundry
Thirdweb Deploy

Note: Refer to this repo for the code reference.

Why Foundry?

Hardhat is definitely a nice Ethereum Development Environment but Foundry has some more cool benefits to offer.

Unlike Hardhat, Foundry allows us to write tests as well as scripts in Solidity
Foundry comes with the Forge Standard library, which allows using Dappsys Test to assert values.
We can simply log values using emit_log(string), emit_int(int_value), emit_uint(uint_value), emit_address(address_value), etc. to log values of different data types
To get more detailed information on the tests, we can simply use the -v flag after the test command. More the number of v will give us more detailed info. Example: forge test -vvv. We can add up to five v flags.
We can mock a user (or we can say an account) using .prank and .startPrank.
We can set nounce, block number, and timestamp for an account.
Foundry gives us the detailed gas report for our tests by running the below command.

forge test --gas-report

Foundry provides us Fuzzing that allows us to define parameters for our test function and it will populate those parameters values on runtime

Why thirdweb deploy?

Thirdweb deploy provides us a thirdweb-cli which allows deploying our Smart Contract to the blockchain without using our account's bare private key.
After deploying the contract, it provides us a nice dashboard to interact with the deployed contract.
It comes with some of the standard pre-built contracts like ERC-20, ERC-721, etc. so that we can directly deploy and use it from their dashboard.
It supports deployment on multiple chains.
It has powerful SDKs for our smart contracts with support for many languages and frameworks.

Getting Started

To get started, we first need to install the foundry. Follow their docs here to install and start running foundry locally.

Once you have foundry up and running locally, create a new project by running the following command in your terminal and then cd into the project directory. For this tutorial, I'm naming my project learn-foundry, you can name it anything you want.

forge init learn-foundry
cd learn-foundry

You should see the following output in your terminal

Let's understand what the project structure of this newly created project looks like.

$ tree . -d -L 1
.
├── lib
├── src
└── test

3 directories

The starter kit consists of Forge Standard Library pre-installed. This is the preferred testing library used for Foundry projects. Additionally, the template also comes with an empty starter contract and a simple test.

Let's write our own simple contract and test for it. For that open this project in your code editor and navigate to the Contract.sol file in the src folder under your root directory. Paste the below code in your Contract.sol file. For this tutorial, we'll be using a simple Contract that keeps track of a count and allows us to increment, decrement and get the count value.

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

contract CountContract {
  uint public count;

  constructor (uint _count) {
    count = _count;
  }

  function setCount (uint _count) public {
    count = _count;
  }

  function increment() public {
    count++;
  }

  function decrement() public {
    count--;
  }
}

Explanation of the Contract

I've added the constructor which will be executed while deploying the contract and in this function, I'm initializing the value of our count variable by taking input from the user.

Following that, setCount allows us to set the value of our Count variable. Likewise, the increment and decrement functions increase and decrease the value of our count variable.

Writing tests

As we have our Contract ready, navigate to the Contract.t.sol file into the test folder, and let's write tests for our contract. We already have the ContractTest contract initiated by the foundry, inside that contract paste the below code.



// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

import "forge-std/Test.sol";
import "src/Contract.sol";

contract ContractTest is Test {
    CountContract countContract;
    function setUp() public {
        countContract = new CountContract(10);
    }

    function testIncrement() public {
        countContract.increment();
        assertEq(countContract.count(), 11);
    }

    function testDecrement() public {
        countContract.decrement();
        assertEq(countContract.count(), 9);
    }

    function testSetCount() public {
        countContract.setCount(20);
        assertEq(countContract.count(), 20);
    }
}

Explanation of the `ContractTest` contract

In the first line of the contract, we are defining a variable countContract of type CountContract.
After that, we have defined the setUp function which is an optional function invoked before each test case is run. In this, we're creating a new instance of our Smart Contract CountContract and passing 10 as an argument. Thus, we are initializing our count variable in our smart contract with the value of 10.

After that, we have the testIncrement function in which we are testing the increment of our count variable. Here, we are asserting the value using the assertEq function which we're getting from Forge's standard Test.sol.
Likewise, we have testDecrement and testSetCount that tests decrement and setCount respectively. We have used CountContract in our tests, so we also need to import it by adding the following import statement above our test contract.

import "src/Contract.sol";

Note: Any functions prefixed with test is run as test cases.

Now, let's run our tests and see if our contract works as expected or not.

forge test

You should see the following output in your terminal

Deployment

As our tests are passed let's deploy our Smart Contract on the Rinkeby test net. For deployment, we are going to use thirdweb-cli from thirdweb deploy. For that, run the following command to detect contracts or extensions in our project.

npx thirdweb detect

Allow it to install the thirdweb package locally when prompted. You should see the following output on your terminal

We have everything set up by now, so let's deploy our Smart Contract by running the following command.

npx thirdweb deploy

This command will compile our Smart Contract, upload the result and will open a thirdweb dashboard in your browser as shown below. If it doesn't open, then manually open the link from the terminal.

We have to pass the initial count parameter as we have required it in our constructor. Pass any number of your choice and select []Rinkeby from the Network dropdown. Connect your wallet to the thirdweb dashboard and make sure that you are on the Rinkeby test network. Once connected, click on the Deploy Now button. This will open 2 MetaMasks popups, Confirm both the transactions. Once the transactions are executed, it'll show the dashboard as shown below.

That's it! You have successfully deployed your contract without risking your private key. You can now use this dashboard to play around with your contract.

Some useful resources on Foundry

Integrating GraphQL APIs into React app

Nazeeh Vahora — Sun, 19 Sep 2021 10:40:28 +0000

In this blog, we'll integrate a GraphQL API into our React app. For testing purposes, I have developed and deployed a public GraphQL API. This API will allow us to perform CRUD operations on Post. You can access the playground at this url and refer to the DOCS and SCHEMA. You can refer to the code from this repo.

We have our GraphQL API, so let us integrate it into our React app. There is more than one way to integrate GraphQL API to the front end, like using GraphQL clients. But I'll be using a library called Urql instead of any other GraphQL client.

There are mainly 3 reasons for me using it:

It is lightweight, powerful, and easy to use.
It is extensible i.e. it allows you to change how you fetch, cache, or subscribe to the data.
Also, my favorite, it enables us to use GraphQL in our app without much complex configuration.

So, navigate to the root directory of our React App and add urql to our app by writing the following command.

yarn add urql graphql

As we have added the urql package to our web app, we need to configure it. For that create a new file namely createUrqlClient.ts. In that create a urql client and provide the URL of the API as an argument and export this client as shown below.

import { createClient } from "urql";

export const createUrqlClient = createClient({
  url: 'https://graphql-dummy-api.herokuapp.com/graphql'
})

Now, to use this client, we need to wrap our <App /> in _app.tsx using the Provider of urql and pass the client as a prop to this provider. You can refer to the _app.tsx from here.

import type { AppProps } from 'next/app';
import { Provider } from 'urql';
import { createUrqlClient } from '../createUrqlClient';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider value={createUrqlClient}>
        <Component {...pageProps} />
    </Provider>
  );
}
export default MyApp;

We are done configuring our Urql client, now let's query our API.

We can query our GraphQL API, as specified in the Urql docs as well. But instead of querying this way, I would prefer using GraphQL Code Generator.

GraphQL Code Generator is a CLI tool that can generate TypeScript typings out of the GraphQL schema. It analyzes the schema, parses it, and outputs code at a wide variety of formats, based on predefined plugins and user-defined ones. We just need to provide our GraphQL API URL, and it will generate all the types.

So, let's add this Code Generator to our app by running the below script.

yarn add graphql
yarn add -D @graphql-codegen/cli

For generating the types, we need to add a typescript plugin by running the below command.

yarn add -D @graphql-codegen/typescript

Now as we have used Urql along with the typescript, we also need to add the TypeScript Urql plugin by running the below code.

yarn add -D @graphql-codegen/typescript-urql

We have added all the necessary plugins of code generator, now let's initiate it in our project by running the script below.

yarn graphql-codegen init

After running the above command, it will prompt us with the type of application where we'll select React tech stack as shown below.

After that, we need to enter the URL of our GraphQL API.

Select the following settings when prompted.

Having introspection selected to no and naming the script as gen continues with the defaults as shown below.

This will create a codegen.yml which will display all the plugins. Also, we can see that a gen script has been added to our package.json.

Now, before generating the types, we need to write the graphql queries and mutations. So let's write a simple query to fetch all the posts in our src/graphql/query/getPosts.graphql file.

query Posts($limit: Int!, $cursor: String) {
  posts(cursor: $cursor, limit: $limit) {
    hasMore
    posts {
      id
      title
      text
    }
  }
}

Similarly, let's write mutations to perform create, update and delete to Posts. In /graphql/mutations/createPost.graphql, lets write mutation to create Post.

mutation CreatePost($input: PostInput!) {
  createPost(input: $input) {
    id
    createdAt
    updatedAt
    title
    text
  }
}

Similarly, for updating Post in /graphql/mutations/updatePost.graphql file.

mutation UpdatePost($id: Int!, $title: String!, $text: String!) {
  updatePost(id: $id, title: $title, text: $text) {
    id
    text
    title
    textSnippet
  }
}

For deleting Post in /graphql/mutations/deletePost.graphql file.

mutation DeletePost($id: Int!) {
  deletePost(id: $id)
}

Navigate to the codegem.yml file in your root and update its content as below.

overwrite: true
schema: "https://graphql-dummy-api.herokuapp.com/graphql"
documents: "graphql/**/*.graphql"
generates:
  generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-urql"

We have all the queries and mutations ready, lets generate the typescript types for our Graphql schema by running the command yarn gen in our root directory. This will generate a new file generated/graphql.tsx containing all the types of our Graphql schema.

As we have generated the types of our query using codegen, let us fetch all posts. In index.tsx, copy the below code. You can refer index.tsx from here

const [{ data, error }] = usePostsQuery({
    variables: {
      limit: 10,
    },
  });

Make sure that usePostsQuery is imported from the generated/graphql.tsx file. In this, we need to pass arguments as an object in variables.

We got all the Posts in this data variable. So let's render it in our frontend. You can find the Post component here.

Let's mutate our post's data. In the provided Post component, I have added the Update-post and Delete-post buttons, so let's add the onClick handler to both the buttons and the logic to it.

For the Delete Post, copy the below code.

const [, deletePost] = useDeletePostMutation();

  const onDeletePost = async () => {
    setLoading(true);
    await deletePost({ id });
    router.reload()
    setLoading(false);
  };

Similarly, let's add click handler to Update Post. You can refer to the UpdatePost Component here. In the onClick handler add the update-post logic from below.

 const [, updatePost] = useUpdatePostMutation()

  const updatePostClicked = async () => {
    setLoading(true);
    await updatePost({
      id: +postId!,
      text,
      title
    })
    setLoading(false);
    router.push('/');
  };

Make sure useUpdatePostMutation() and useDeletePostMutation() are imported from /src/generated/graphql.tsx.

All these CRUD operations can be done using other libraries too but using the correct combination of packages makes our task a lot easier and as we can notice using codegen has made our task quite easy.

Start contributing to Open Source as a beginner

Nazeeh Vahora — Sat, 14 Aug 2021 15:58:51 +0000

Want to contribute to an Open Source Project, but don't know from where to get started?
Well, you have come to the right place. In this article, we'll discuss how to contribute to an Open Source Project.

Firstly, I would like to make you believe that contributing to an open-source project is not difficult as climbing the Great Wall of China, it's very easy. So make your mind stress-free from the weight of the word Open Source.

First things first, to contribute to an Open Source Project, you need to stick to a definite Teck Stack (or language) in which you are proficient. After selecting a technology or language, head over to the Github and search for an Open Source Project that uses the same tech stack as yours.

In the repository of that project, navigate to the issues tab. In this tab, under the labels dropdown, select good first issue from the dropdown as shown below.

This will display all the issues of that repository, which is labeled as good first issue.

Alternative to manually finding the issue is, you can head on to this website. Under the BROWSE BY LANGUAGE on the left, select your tech stack. This will display all the issues labeled as good first issue from all the Open Source Projects having the selected tech stack.

Iterate through each of the issues of a particular project. If you have the slightest doubt that you can fix it, sure-shot give it a try. In case you get stuck somewhere, then the reviewers of the project are there to help you out and from my experience, I can say that the reviewers of the Open Source community are very helpful.

Let me share my journey of starting an Open Source Contribution with you.

One of my friends has started contributing to Open Source. He insisted that I should also start contributing to an Open Source. Initially, I was very scared like you all and were having doubts like whether my coding standards will be up to the industry standards or not, could I be able to solve the issue, and will my PR will ever get merged. But my friend cheered me up and motivated me to at least give it a try.

And there's where all the false beliefs broke out. I found an issue and tried fixing it. I found out that it was too easy to get scared. I was easily able to fix an issue. Also, it wasn't like I never got stuck up in the middle. Well, I do, but as I said reviewers of an Open Source Community are very helpful. So, I asked him and he helped me at all the places where I was stuck. Also, he suggested me some more changes wherever required from his side.

After fixing the issue, I created my first PR, and guess what it got merged. I was very happy on that day. I experienced a wonderful feeling of contributing to an Open Source world. It is unexpressive and believe me you too will experience it on that very day. After that, I found more issues and contributed to them. After gaining much confidence, you can choose to fix issues not labeled as good first issue, as I did.

In concluding words, I would simply like to wish you luck and ask you to just go ahead and believe in you, again reviewers are there if you get stuck.

Connect with me:
Twitter: Nazeeh21
Github: Nazeeh21

Testing Solidity Smart Contracts

Nazeeh Vahora — Wed, 04 Aug 2021 21:34:34 +0000

In the previous blog, we discussed deploying our Smart Contract to the Rinkeby Test Network and interacting with it from our front end.

I decided to write this article on tests as a bonus. You should write these tests before writing the Smart Contract and integrating with the front end.

One way of testing our Contract is interacting with it manually and testing every scenario. In this, one needs to consider every scenario and test the Contract in that case. Remembering every edge case could be tedious. Also forgetting a single edge case could break our Contract.

This is not a preferred way of testing. Instead, we should write tests for our Smart Contracts. Writing tests will check our Smart Contract in every possible scenario and ensures our Contract behaves expectedly. If any of the test cases fail, we can fix that edge case during production only. Thus, writing tests for Smart Contracts is necessary.

So, let's write tests for our Lottery Contract.

Note: To Follow along, refer to this repo.

Navigate to the lottery-contract directory we created in the previous blog and create an empty directory named test. Inside the test directory, create an empty Lottery.test.js file.

For writing tests, we need to add a dependency to our project. For that run the following command in your root directory.

yarn add -D ganache-cli mocha

We have all pre-requisites for writing tests. Now, head on to the Lottery.test.js file and paste the following code.

const assert = require('assert');
const ganache = require('ganache-cli');
const Web3 = require('web3');

const web3 = new Web3(ganache.provider());
const { interface, bytecode } = require('../compile.js');

ganache-cli is a fast and customizable blockchain emulator that allows us to make calls to the blockchain without the overheads of running an actual Ethereum node. This will help us in performing our tests instantaneously.

For creating an instance of web3, we have used the provider from ganache as we will be deploying our Contract to the ganache local network for testing. Apart from web3, we have required assert (a native javascript library) and interface along with the bytecode from our compiled Contract.

Now, paste the following code.

let accounts;
let lottery;

beforeEach(async () => {
  accounts = await web3.eth.getAccounts();
  lottery = await new web3.eth.Contract(JSON.parse(interface))
    .deploy({ data: bytecode })
    .send({ from: accounts[0], gas: '1000000' });
});

We have declared two variables namely accounts and lottery that will store our accounts and lottery instance respectively.

After that, we have declared the beforeEach() function which will execute before every test case. In this function, we are fetching the accounts from the web3 instance and storing them in the accounts variable. After that, we have deployed the local instance of our Contract using web3 and stored it in the lottery variable.

Now, let's write our first test.

describe('Lottery Contract', () => {
  it('deploys a contract', () => {
    assert.ok(lottery.options.address);
  });
}

Above we have defined describe() function. It allows us to gather our tests into separate groupings within the same file, even multiple nested levels.

In the first argument of our describe() function, we have passed the name of our test-suite i.e. 'Lottery Contract'. Inside our describe() function, we have declared an it() function, inside which we have written our test. This test will ensure that our Contract gets deployed successfully.

The first argument of the it() function will accept the name of our test and the second argument will accept the function which runs our test. In this function, we have written assert.ok() which ensures that the value passed inside this function is not null.

We have written our first test. Now, let's run our test. For that navigate to the root directory and run the following command in the terminal.

yarn test

You should see the following output in your terminal.

The tick in front of the test name indicates that our test has successfully passed.
Congratulations! You have written your first test.

Now let's write tests for other scenarios as well.

For that paste the code from below inside the describe() function.

  it('allows 1 account to enter', async () => {
    await lottery.methods.enter().send({
      from: accounts[0],
      value: web3.utils.toWei('0.02', 'ether'),
    });

    const players = await lottery.methods.getPlayers().call({
      from: accounts[0],
    });

    assert.strictEqual(accounts[0], players[0]);
    assert.strictEqual(1, players.length);
  });

This test will check whether our Lottery allows users to enter the Lottery. For that, we are initially entering the lottery by calling the lottery.methods.enter() method. Following that, we are fetching the players of the lottery by calling the lottery.methods.getPlayers() method. Our players variable will be an array containing the addresses of all the players of the contract.

Now, we have called the assert.strictEqual() method which ensures that both the arguments passed to it are strictly equal. This test will ensure that we can enter our Lottery successfully.

Similarly, we'll check for multiple accounts to enter our lottery. For that paste the code from below.

   it('allows multiple accounts to enter', async () => {
    await lottery.methods.enter().send({
      from: accounts[0],
      value: web3.utils.toWei('0.02', 'ether'),
    });

    await lottery.methods.enter().send({
      from: accounts[1],
      value: web3.utils.toWei('0.02', 'ether'),
    });

    await lottery.methods.enter().send({
      from: accounts[2],
      value: web3.utils.toWei('0.02', 'ether'),
    });

    const players = await lottery.methods.getPlayers().call({
      from: accounts[0],
    });

    assert.strictEqual(accounts[0], players[0]);
    assert.strictEqual(accounts[1], players[1]);
    assert.strictEqual(accounts[2], players[2]);
    assert.strictEqual(3, players.length);
  });

In this test, we are entering the lottery from multiple accounts and after that, we are ensuring that each player can enter the lottery or not by calling the assert.strictEqual() method.

After this, we'll write a test to ensure that users can't enter with ethers less than the required amount to enter the lottery. For that, paste the code below.

  it('requires minimum amount of ether to enter', async () => {
    try {
      await lottery.methods.enter().send({
        from: accounts[0],
        value: 0,
      });
      assert(false);
    } catch (err) {
      assert(err);
    }
  });

This test will make sure that the test fails when a user tries to enter with ethers less than the required amount and pass the test when the user is unable to enter the lottery.

Following this, we will write a test that tests that only the manager could able to pick a winner. For that, paste the below code.

it('only manager can pick winner', async () => {
    try {
      await lottery.methods.pickWinner().send({
        from: accounts[1],
      });
      assert(false);
    } catch (err) {
      assert(err);
    }
  });

Remember in our beforeEach() function, we have deployed the contract using accounts[0]. Thus, the address of our manager is the address stored at accounts[0]. As a result, our test should fail if we try to pick a winner from an account other than accounts[0].

This test will ensure that only our manager is allowed to pick a winner.

At last comes our final test, which ensures that ethers are sent to the winner of the Contract.

For that, paste the below test.

it('sends money to the winner and resets the players array', async () => {
    await lottery.methods.enter().send({
      from: accounts[0],
      value: web3.utils.toWei('2', 'ether'),
    });

    const initialBalance = await web3.eth.getBalance(accounts[0]);

    await lottery.methods.pickWinner().send({
      from: accounts[0],
    });

    const finalBalance = await web3.eth.getBalance(accounts[0]);

    const difference = finalBalance - initialBalance;
    console.log('difference: ', difference);
    assert(difference > web3.utils.toWei('1.8', 'ether'));

    const players = await lottery.methods.getPlayers().call({ from: accounts[0]})

    assert.strictEqual(0, players.length)
  });

This test ensures that lottery ethers are sent to the winner of the lottery on picking up the winner by the manager of the contract.

We have successfully written all the necessary tests. Now let's run these tests. For that, navigate to the root directory and run the yarn test command.

You should see the following output in the terminal.

Congratulations! You have successfully written tests for your Smart Contract. These tests provide security that your Contract won't break out.
Now we can be more reliable on your Smart Contracts and can be 100% sure that our Smart Contract will not misbehave.

Connect with me on twitter.

Integrate your React App with Smart Contracts

Nazeeh Vahora — Mon, 19 Jul 2021 14:57:34 +0000

In the previous blog, we discussed writing a Smart Contract using Solidity and interacting with it using Remix IDE. Now, we'll deploy our Lottery contract wrote in previous blog.

Note: You can refer this repo to follow along.

Initialize an empty react project namely Lottery-Contract using the following script.

npx create-react-app lottery-contract

You can add Typescript support to your project by following the steps mentioned here.

Inside lottery-contract directory, create a directory namely contracts. In contracts directory, create new file namely Lottery.sol.

Copy the Smart contract from the Remix IDE and paste it in the Lottery.sol file.

Previously in Remix, we tested our Smart Contract by deploying it locally. Now, to interact with our Contract from the frontend, we need to deploy it to a public blockchain network i.e. Rinkeby Test Network.

For deploying a Contract to a public network, we first need to have the Metamask extension installed. If you don't have Metamask, you can install it from here and Sign in. While signing in, you will be prompted to copy the Backup Phrase. Copy that Backup Phrase and save it for future reference. After signing in, get some free ethers from public faucets.

Now, to deploy our contract we first need to compile our Solidity Contract.

To deploy our Contract, we need to add *Solidity * compiler to our project by running the following command. We also need fs (file-system) module for reading the files, along with the Solidity compiler.

npm i fs-extra solc

In the project directory, create a compile.js file, for writing the logic to compile our Solidity contract.

Navigate to the compile.js file and paste the following code.

const path = require("path");
const fs = require("fs");
const solc = require("solc");

const lotteryPath = path.resolve(__dirname, "contracts", "Lottery.sol");
const source = fs.readFileSync(lotteryPath, "utf8");

In the source variable, we have stored Solidity Contract by reading the Contract using fs and path module (path is a native js library).

Now, we have to compile this contract and export it. For that, paste the code from below in the compile.js file.

module.exports = solc.compile(source, 1).contracts[":Lottery"];

Above, we have used solc.compile() which compiles our Solidity Contract and returns interface and bytecode, which we will use to deploy our Contract on Rinkeby Test Network.

You can see the compiled Contract by logging the output from solc.compile() in the console.

Now, in the root directory, create a deploy.js file, which will contain our deployment logic.

To deploy our contract, we need to add 2 libraries i.e. truffle-hdwallet-provider and web3. For that, run the following code in the root directory.

npm i truffle-hdwallet-provider web3

We have added the library packages required to deploy our Contract. But apart from the libraries, we'll need to access a Blockchain node to deploy our contract on a live public network. This node will be provided by infura to us.

To get access to node for our project, singup on infura.io and navigate to Ethereum tab on the left Navbar.
Under the Ethereum tab, click on Create New Project for creating a new project.

After creating new project, under the KEYS section, expand the ENDPOINTS and select Rinkeby as shown below.

Selecting the Rinkeby network will change the 2 URLs displayed below the ENDPOINTS dropdown. Copy the second URL from the two and save it, as we'll use it after some time to deploy our Contract.

Navigate back to the deploy.js file in our project and paste the code from below.

const HDWalletProvider = require('truffle-hdwallet-provider');
const Web3 = require('web3');

// Getting the output of our compiled Solidity Contract
const { interface, bytecode } = require('./compile');

To deploy a Contract to Rinkeby, we first need to set up a wallet provider to connect our Infura node with our Metamask wallet. For that, copy the below code and paste in the deploy.js file.

const provider = new HDWalletProvider(
  // `$YOUR_METAMASK_RECOVERY_CODE`,
  // `$RINKEBY_INFURA_API`
);

Replace $YOUR_METAMASK_RECOVERY_CODE and $RINKEBY_INFURA_API with your Metamask recovery phrase and your Infura API respectively.

For interacting with the BlockChain Network and deploying our Contract, we are going to use web3. To initialize an instance of web3 paste the below code in the deploy.js file.

const web3 = new Web3(provider);

While creating an instance of web3, we are providing provider as an argument to Web3() function. Note, that we have configured our provider with our Metamask's recovery phrase and Infura URL. Due to this, our Contract will get deployed using Ethers from our Metamask wallet and our Infura Node URL.

Finally, let's move to our deploy function. For that, paste the below code to the deploy.js file.

const deploy = async () => {
  // getting accounts from our Metamask wallet
  const accounts = await web3.eth.getAccounts();

  console.log('Attempting to deploy from account', accounts[0]);

  // deploying our contract
  const result = await new web3.eth.Contract(JSON.parse(interface))
    .deploy({ data: bytecode })
    .send({ gas: '1000000', from: accounts[0] });

  console.log(interface)
  console.log('Contract deployed to', result.options.address);
};
deploy();

Let's discuss our deploy function. Firstly, we have fetched the accounts connected to our Metamask wallet.

Now, each Metamask wallet comprises of 12 Ethereum wallets. Thus web3.eth.getAccounts() will return an array comprising of 12 wallet addresses.
Among these 12 addresses, we'll deploy from our first account. Thus, we have used accounts[0] for deploying our contract.

Following that, we have declared a result variable.

In that, we have stored the returned data from our deployed Contract.

To deploy our Contract, we need to call new web3.eth.Contract(JSON.parse(interface)) and in the .Contract() method, we need to provide our Contract's instance in JSON form as an argument.

Following the .Contract(), we have called .deploy({ data: bytecode}) and .send({ gas: '1000000', from: accounts[0] }) methods respectively.

.deploy() function will take bytecode of our contract as an argument and .send() function will take gas value and account address as an argument.

gas is the amount of ether we need to send along with the deployment of our Contract and its unit is Wei.

Note: Gas value won't get stored as a Contract Ether's on the Rinkeby Network.

from attribute specifies the account from which we want to deploy our contract.

Now run node deploy.js in the terminal.

After a successful deployment of the Contract, interface and Address of the Contract will be logged in the console. Copy both the values and keep them for future reference.

We have completed the deployment, now let's head on to the frontend interaction.

For that, we need to create a local instance of our contract, using our Contract's interface and blockchain Address on which our Contract is deployed.

For that, in the src folder, create an empty web3.js file. In that file, copy the below code.

import Web3 from 'web3';
window.ethereum.enable();

const web3 = new Web3(window.web3.currentProvider);

export default web3;

In the web3 configuration, we have used window.web3.currentProvider as a provider which uses the provider from the Metamask extension in the browser.

But before using the Metamask provider, we need to enable it by writing window.ethereum.enable();. This will allow us to use the Metamask provider in our browser.

Now, let's create a local instance of our Contract using the Configuration of web3 we just configured above.

Create an empty lottery.ts file and copy the code from below.

import web3 from './web3';

const address = /* Your Contract's address */;

const abi = [
 //  Your Contract's abi code
];

// @ts-ignore
export default new web3.eth.Contract(abi, address);

Now, get your Contract's abi and address which we logged in the terminal while deploying our Contract. Using both the values, export a new instance of web3.

Finally, let's interact with our contract. Head on to the App.tsx file in the src folder. Declare 3 variables shown below and Copy the useEffect() function into the App.tsx.

  const [manager, setManager] = useState('');
  const [players, setPlayers] = useState([]);
  const [contractBalance, setContractBalance] = useState('');
  const [value, setValue] = useState('');
  const [message, setMessage] = useState('');

   useEffect(() => {
    const init = async () => {
      const manager = await lottery.methods.manager().call();
      const players = await lottery.methods.getPlayers().call();
      const balance = await web3.eth.getBalance(lottery.options.address);

      setManager(manager);
      setPlayers(players);
      setContractBalance(balance);
    };
    init();
  }, []);

For using the instance of our locally deployed Lottery Contract, we need to import it. Thus, copy the import statements from below to App.tsx file.

import React, { useEffect, useState } from 'react';
import lottery from './lottery';

In the useEffect(), we are fetching the manager of the Contract by calling await lottery.methods.manager().call() method. Similarly, we can get players in the Contract by calling .getPlayers().call() method.

But, for getting the balance of the Contract, we need to call web3.eth.getBalance(lottery.options.address);. This function will use an instance of web3 and get the balance at the specified address.

These all functions will return Promise. Thus, we need to make this function asynchronous. After fetching all the values, update their respective states.

Following, in the src create an App.css file. In App.css add the code from below.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Import this css in the App.js file using the following import statement.

import './App.css';

Add the following code in the return statement of App.tsx.

return (
    <div>
      <h2>Lottery Contract</h2>
      <p>This contract is managed by {manager}</p>
      <p>
        There are currently {players.length} entered, competing to win{' '}
        {web3.utils.fromWei(contractBalance, 'ether')} ether!
      </p>
      <hr />
      <form onSubmit={submitForm}>
        <h4>Want to try your luck?</h4>
        <div>
          <label>Amount of ether to enter</label>
          <input
            style={{ marginLeft: '1vw' }}
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
          <button style={{ display: 'block', marginTop: '1vh' }}>Enter</button>
        </div>
      </form>

      <hr />

      <div>
        <h4>Ready to pick a winner?</h4>
        <button onClick={onPickWinner}>Pick a winner!</button>
      </div>
      <hr />
      <h1>{message}</h1>
    </div>
  );

In the above return statement, it is clear that we are displaying the Contract's data and providing a form to enter the Contract.

But, for our Frontend to get functional, we need to define submitForm and onPickWinner functions. So let's define it.

const submitForm = async (e: any) => {
    e.preventDefault();

    const accounts = await web3.eth.getAccounts();
    setMessage('Waiting on transaction success...');
    await lottery.methods.enter().send({
      from: accounts[0],
      value: web3.utils.toWei(value, 'ether'),
    });
    setMessage('You have been entered!');
  };

In the submitForm() function, we are initially fetching the accounts. Following that, we are calling lottery.methods.enter().send() method to enter the lottery.

Note: Here, we need to call the .send() method as we are creating a transaction on the blockchain network and also need to specify the account from which we want to make a transaction. Also, making a transaction on the blockchain network requires some amount of fee as a gas value and its unit is Wei.

Now, declare PickWinner() function as below.

 const onPickWinner = async () => {
    const accounts = await web3.eth.getAccounts();

    setMessage('Waiting on transaction success...');

    await lottery.methods.pickWinner().send({
      from: accounts[0],
    });

    setMessage('A winner has been picked!');
  };

Remember, we have allowed only the manager of the contract to pick a winner. Thus, calling pickWinner function from accounts other than the manager's account will throw an error. Also sending a transaction on the blockchain will take about 15 - 20 s to get executed.

Congratulations! You have successfully developed your first Dapp.

Develop your first Dapp!

Nazeeh Vahora — Sat, 03 Jul 2021 07:54:59 +0000

Interested in Blockchain technology, but don't find a reliable source to get started?
You have come to the right place. In this article, we'll learn how to develop a complete decentralized website (Dapp) from scratch.

We will be writing a Lottery contract that will allow people to participate in the lottery. The lottery manager will pick a lottery winner and all the lottery amount will eventually get transferred to the winner. Sounds interesting, right? So, let's get started!

To develop a dapp, we first need to write an Ethereum Smart Contract using Solidity which we'll deploy on the blockchain network.

We'll be using Remix IDE for writing, debugging, and interacting locally with the Smart Contract.

Note: To follow along, refer to this contract.

Let's write our first smart contract. Head on to the Remix IDE and navigate to the Storage.sol file in the Contracts folder as shown.

Delete the existing code from the Storage.sol file and follow along.

Specify the Solidity version for our code by adding the code below.

pragma solidity ^0.4.17;

Now, let's get started with the Contract.

contract Lottery {  

 }

Firstly, we have used the contract keyword to declare a Contract named Lottery, followed by the curly braces, where we'll write our Contract.

Now, declare two variables namely manager of datatype address and players of datatype address[]. In Solidity, the address datatype is used to store the wallet address.

address public manager;
address[] public players;

Following, declare a Lottery() function. As this function has the same name as the Contract name, it will eventually work as a constructor.

function Lottery() public {
        manager = msg.sender;
}

This function will execute automatically when anyone deploys the Contract. We have used the public keyword after the function name which will make the function's visibility public and let anyone call the function.

In this function, we are setting the caller of the function as the manager. As a result, the user who will deploy this Contract will be recognized as the manager of the contract.

In our case, you will the renowned manager of the Contract as you are going to deploy it.

After that, declare an enter() function.

function enter() public payable {
        require(msg.value > .01 ether);
        players.push(msg.sender);
}

This function will let anyone enter our lottery. Apart from the public keyword, we have used the payable keyword. It specifies that this function will require some amount of ethers to execute. So, whoever wants to enter our lottery, needs to pay a specified amount of ether, which also seems necessary, right? This ether will get stored as the Contract's ether in our Contract.

In the enter() function, we have written require(msg.value > .01 ether);. Here, msg.value denotes the amount of ether the user sends along with the function. It specifies that to enter our Lottery, the caller of the function must send ethers more than 0.01 ether and if the caller fulfills the specified condition, then only he is welcomed in the contract by pushing the caller's address to the players array.

Following the enter() function, comes the random() function.

function random() private view returns (uint) {
        return uint(keccak256(block.difficulty, now, players));
 }

Yes, you are getting it right. This function will return a random number which will help the manager in picking a random winner among the entered players. Solidity does not have a native random method, thus we have to define our own.

But let's discuss what are these private, view, and returns keywords following the function name.

private -> This keyword is the opposite of the public keyword. By using the private keyword, we are blocking public access to this function. As a result of which, this function can't be called from outside of the contract, even by the manager, and can only be called from inside of the Contract.

view -> It will restrict the modification of the data of our Contract and will only allow reading our Contract data.

returns -> It specifies that our function will return some data. Following it, we have written (uint) which specifies that our function will return data of type uint. (uint stands for unsigned integer).

If you want to know more about the Solidity datatypes, then go to this page.

After random() comes the pickWinner() function, which will let the manager pick the winner of our Lottery.

function pickWinner() public restricted {
        uint index = random() % players.length;
        players[index].transfer(this.balance);
        players = new address[](0);
}

Here, we have used a new keyword namely restricted after the public keyword.

What does this restricted keyword specify? Well, we'll talk about this keyword after the upcoming function.

In the pickWinner() function, we are initializing the index variable of type uint to store the array index of the winning player, which is obtained by the shown operation. This operation will return a random number from 0 to players.length() -1.

After getting the index, we are transferring all the contract's ether to the address at the players[index]. Followed by resetting the players variable to an empty array, so that we can now accept entries for a new lottery.

After pickWinner(), comes the restricted() modifier.

modifier restricted() {
        require(msg.sender == manager);
        _;
}

Modifier is a special keyword that allows you to control the behavior of your smart contract functions. We have seen the use case of modifier in pickWinner() function. By using modifier, all the conditions specified in the modifier will also be applicable for the function in which it is used.

In restricted() modifier, we have specified the condition require(msg.sender == manager); which specifies that sender must be the manager of the Contract.
After that, we have written _;, which will execute all the function code after this.

Lastly comes the player() function, which returns the players array.

function getPlayers() public view returns (address[]) {
        return players;
}

Getting bored of the theoretical thing, right? So, let's deploy our contract and start interacting with it.

Navigate to the deploy and run transactions panel on the Remix IDE. In this panel, make sure, your ENVIRONMENT is set to JavaScript VM as shown.

Similarly, select Lottery-Contracts under the CONTRACT tab. Now, click Deploy.

After Successfully deploying your Contract, you can see all the variables and methods of our Lottery contract in a Graphical form as shown below.

Clicking each of these buttons, allow us to interact with our Contract.

On clicking the manager button, you should get your current address. You can verify that address with your current address in the ACCOUNT tab below the ENVIRONMENT tab as shown below.

You can also change your current account, by selecting another account from the ACCOUNT tab. Now, enter the lottery from this new account.

Note: You can check the status of your transaction by expanding the panel from the bottom as shown below.

Now, click the getPlayers button, you should get an empty array. Surprised to see an empty array despite entering the lottery?

In reality, our enter function was failed. This was because we have required a minimum value of 0.01 ether to enter our lottery.

Now, under the VALUE tab, change the unit to ether from Wei and enter value 1. Now, again click the enter button and then click getPlayers button again. Now you should see your current address.

Finally, click the pickWinner button. Before clicking, ensure that your address is the same as the manager's address, by selecting from the ACCOUNT tab. After picking the winner, you can verify that the ether in any of the player's addresses is again 100 and now the players array is also empty.

That's all! Woohoo! You just wrote and deployed your first Smart Contract on the test network.

To integrate React web app with your Smart Contract, you can follow next tutorial.

Forem: Nazeeh Vahora

Exploring the Power of React Server Components and React Suspense

React Server Components

React Suspense

Wrapping Up and Looking Ahead

Testing React Components: The Snapshot & Component Testing in Isolation

Getting Started

Snapshot testing

Storybook: Testing in Isolation

Explanation

Compiling and testing Vyper contract using Foundry

What is Vyper?

Why Foundry?

Compiling vyper contracts

Deploying a vyper contract

Writing And Deploying Smart Contracts Using Foundry & Thirdweb Deploy

Why Foundry?

Why thirdweb deploy?

Getting Started

Explanation of the Contract

Writing tests

Explanation of the ContractTest contract

Deployment

Some useful resources on Foundry

Integrating GraphQL APIs into React app

Start contributing to Open Source as a beginner

Testing Solidity Smart Contracts

Note: To Follow along, refer to this repo.

Integrate your React App with Smart Contracts

Note: You can refer this repo to follow along.

Note: Gas value won't get stored as a Contract Ether's on the Rinkeby Network.

Develop your first Dapp!

Note: You can check the status of your transaction by expanding the panel from the bottom as shown below.

Explanation of the `ContractTest` contract