DEV Community: Mohamed Elgazzar

Build an AI Image Captioner with React Native & Hugging Face + Unit Testing

Mohamed Elgazzar — Sun, 04 Feb 2024 22:40:46 +0000

Hey there!👋 After a bit of a hiatus, I'm back and ready to dive into some coding fun. In this article, we'll be building something exciting – an AI Image Captioning App using React Native and the Hugging Face Inference API.

Getting Started

Without any more delays, let the coding begin! We will be using Expo to bootstrap our React Native project. Expo is a set of tools and services for building React Native applications more easily and quickly.

Before we kick things off, make sure you have Node.js installed on your machine.

To initialize a new project, run the following command:

npx create-expo-app ai-image-captioner && cd ai-image-captioner

After navigating to the project directory, install the following dependencies:

npx expo install expo-camera expo-image-picker expo-font expo-splash-screen

npm install axios

axios: axios is a promise-based HTTP client for the browser and Node.js. It is commonly used for making HTTP requests and handling responses.
expo-camera: expo-camera is a part of the Expo framework, providing a set of components and APIs for integrating camera functionality into React Native applications. It simplifies the process of capturing photos and videos.
expo-image-picker: expo-image-picker is another Expo package that facilitates accessing the device's image and video picker. It allows users to choose images or videos from their device's gallery for use within the application.
expo-font: expo-font is an Expo module that simplifies the process of loading custom fonts in React Native applications. It provides tools to easily incorporate and use custom fonts for styling text elements.
expo-splash-screen: expo-splash-screen is an Expo-specific module designed to manage the splash screen (initial screen displayed while the app is loading) in React Native applications. It offers an easy way to customize and control the splash screen experience.

Hugging Face:

Hugging Face is a machine learning and data science platform and community that helps users build, deploy and train machine learning models.

Hugging Face offers a diverse array of tools, models, and datasets that empower developers and researchers in the field of machine learning. Their platform is home to an extensive library of pre-trained models, facilitating easy integration and experimentation for professionals working in artificial intelligence.

Let's head to the Hugging Face official website and create an account.

Once you have created your account, you can navigate to access tokens and generate one.

Copy it and set it aside. We will use it in a few moments.

Pre-trained models:

A pre-trained model is a machine learning (ML) model that has been trained on a large dataset and can be fine-tuned for a specific task.

The Model Hub allows users to discover, share, and use pre-trained models for various tasks.

There are various approaches to integrate pre-trained models seamlessly. For a quick and straightforward implementation, we are going to use the Inference API. However, if your project demands a higher level of customization and control, you can use the Transformers library.

Inference API

When opting for the Inference API, you have two pathways. You can either incorporate the huggingface/inference package into your project for a streamlined experience, or take advantage of direct API access by defining the endpoint variable, such as: ENDPOINT = https://api-inference.huggingface.co/models/<MODEL_ID>

Our app consists of a few components, but the heart of the operation lies in App.js. Copy the code below into the file:

import React, { useState } from "react";
import axios from "axios";
import ImageForm from "./components/ImageForm";

const App = () => {
  const [caption, setCaption] = useState("");

  const handleImageUrl = async (imageUrl) => {
    try {
      let image = await (await fetch(imageUrl)).blob();
      const HUGGING_FACE_API_KEY = "HUGGING_FACE_API_KEY";
      const response = await axios.post(
        "https://api-inference.huggingface.co/models/nlpconnect/vit-gpt2-image-captioning",
        image,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${HUGGING_FACE_API_KEY}`,
          },
          transformRequest: [(data) => data],
        }
      );
      setCaption(response.data[0].generated_text);
    } catch (error) {
      console.error(error);
    }
  };

  return <ImageForm onSubmit={handleImageUrl} caption={caption} />;
};

export default App;

Now let's break down some key parts:

Here, we import React and useState from React for our component's state management. Additionally, we bring in axios for making HTTP requests and ImageForm, a component we'll create to handle image processing. Then, we declare the App component and using the useState hook, we set up a state variable caption and its corresponding setter function setCaption.

handleImageUrl, is where the real action happens. It takes an imageUrl as an argument, fetches the image, and makes a POST request to the Inference API. We used the nlpconnect/vit-gpt2-image-captioning model for image captioning. The result is stored in the caption state.

Note: transformRequest: [(data) => data] in the axios request is used to disable automatic data serialization, and send data in its raw form.

Finally, in the return statement, we render the ImageForm component, passing down the handleImageUrl function and the caption state as props.

Create a new ImageForm.js file with the following content:

import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  TextInput,
  TouchableOpacity,
  Image,
  Text,
  ActivityIndicator,
  StyleSheet,
  Alert,
} from "react-native";
import { Camera, CameraType } from "expo-camera";
import { useFonts } from "expo-font";
import * as ImagePicker from "expo-image-picker";
import * as SplashScreen from "expo-splash-screen";
import CameraScreen from "./CameraScreen";
import { Preview } from "../assets";

SplashScreen.preventAutoHideAsync();

const ImageForm = ({ onSubmit, caption }) => {
  const [imageUrl, setImageUrl] = useState(null);
  const [selectedImage, setSelectedImage] = useState(null);
  const [loading, setLoading] = useState(false);

  const [toggleCamera, setToggleCamera] = useState(false);
  const [capturedImage, setCapturedImage] = useState(null);
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const [type, setType] = useState(CameraType.back);

  const [fontsLoaded, fontError] = useFonts({
    "BebasNeue-Regular": require("../assets/fonts/BebasNeue-Regular.ttf"),
  });

  useEffect(() => {
    // Request permission to access the photo library
    (async () => {
      const { status } =
        await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== "granted") {
        Alert.alert(
          "Permission denied",
          "You need to grant permission to access the photo library."
        );
      }
    })();
  }, []);

  const pickImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
      if (!result.cancelled) {
        setSelectedImage(result.assets[0].uri);
        setImageUrl(result.assets[0].uri);
      }
    } catch (error) {
      console.error(error);
    }
  };

  const handlePress = async () => {
    setLoading(true);
    await onSubmit(imageUrl);
    setLoading(false);
  };

  const submitImage = () => {
    setToggleCamera(!toggleCamera);
  };
  const cancelCamera = () => {
    setToggleCamera(!toggleCamera);
    setImageUrl("");
    setCapturedImage(null);
    setSelectedImage(null);
  };

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <View style={styles.wrapper} onLayout={onLayoutRootView}>
      {toggleCamera ? (
        <CameraScreen
          cancelCamera={cancelCamera}
          setImageUrl={setImageUrl}
          submitImage={submitImage}
          capturedImage={capturedImage}
          setCapturedImage={setCapturedImage}
          requestPermission={requestPermission}
          permission={permission}
          type={type}
          setSelectedImage={setSelectedImage}
        />
      ) : (
        <View style={styles.container}>
          <View>
            <Text style={[styles.textStyle, styles.header]}>
              Image Captioner! 🤗
            </Text>
          </View>

          <View style={styles.imagePreviewContainer}>
            <Image
              source={ selectedImage ? { uri: selectedImage } : Preview }
              style={[styles.imagePreview, !selectedImage && { width: 100 }]}
              resizeMode="contain"
            />
          </View>

          <View>
            <Text style={[styles.textStyle, { fontWeight: "bold" }]}>
              {caption !== "" && "🪄 " + caption + " 🪄"}
            </Text>
          </View>

          <View style={styles.inputContainer}>
            <TextInput
              style={styles.inputBox}
              autoCapitalize="none"
              placeholder="Enter Image Link"
              value={imageUrl}
              onChangeText={(url) => setImageUrl(url)}
            />
          </View>

          <View>
            <Text
              style={{
                fontSize: 20,
                fontWeight: "bold",
                textAlign: "center",
                color: "#8C94A5",
                marginVertical: 10,
              }}
            >
              OR
            </Text>
          </View>

          <View style={styles.buttonArea}>
            <TouchableOpacity
              style={[
                styles.button,
                { backgroundColor: "#0166FF" },
              ]}
              onPress={submitImage}
            >
              <Text style={styles.ButtonText}>Take Photo</Text>
            </TouchableOpacity>
          </View>

          <View style={styles.buttonArea}>
            <TouchableOpacity
              style={[styles.button, { backgroundColor: "#0166FF" }]}
              onPress={pickImage}
            >
              <Text style={styles.ButtonText}>Browse Images</Text>
            </TouchableOpacity>
          </View>

          <View style={styles.lineStyle} />

          <View style={[styles.buttonArea, styles.submitBtnArea]}>
            <TouchableOpacity
              style={[styles.button, { backgroundColor: "#212429" }]}
              onPress={handlePress}
            >
              <Text style={styles.ButtonText}>Process</Text>
            </TouchableOpacity>
          </View>

          {loading && (
            <ActivityIndicator
              size="large"
              color="#0000FF"
              style={styles.loading}
            />
          )}
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    height: "100%",
    paddingHorizontal: 30,
    paddingVertical: 80,
  },
  container: {
    height: "100%",
  },
  header: {
    fontWeight: 700,
    fontSize: 35,
    fontFamily: "BebasNeue-Regular",
    color: "#29323B",
  },
  textStyle: {
    fontSize: 14,
    marginTop: 8,
    marginBottom: 5,
    textAlign: "center",
    color: "#29323B",
  },
  inputContainer: {
    marginTop: 20,
  },
  inputBox: {
    borderColor: "#E1E4EB",
    height: 55,
    width: "100%",
    borderRadius: 10,
    borderWidth: 2,
    padding: 10,
    textAlign: "left",
  },
  button: {
    backgroundColor: "blue",
    height: 40,
    width: "100%",
    borderRadius: 5,
    padding: 10,
  },
  buttonArea: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 5,
  },
  submitBtnArea: {
    marginVertical: 10,
  },
  ButtonText: {
    color: "white",
    textAlign: "center",
  },
  loading: {
    marginTop: 8,
  },
  imagePreviewContainer: {
    alignItems: "center",
    marginBottom: 16,
    marginTop: 16,
    width: "100%",
    height: 200,
    borderWidth: 2,
    borderStyle: "dashed",
    borderColor: "#7BA7FF",
    borderRadius: 5,
  },
  imagePreview: {
    borderRadius: 5,
    width: "100%",
    height: "100%",
  },
  lineStyle: {
    borderWidth: 0.5,
    borderColor: "#D3D8E3",
    marginBottom: 15,
    marginTop: 10,
  },
});

export default ImageForm;

We first import necessary modules and components for the ImageForm component.

Then, we configure SplashScreen that invokes preventAutoHideAsync to prevent the splash screen from hiding until fonts are loaded.

After that, we initialize state variables using useState for managing the component's state.

toggleCamera state manages whether the camera is active.
permission and requestPermission manage camera permissions.
type manages the camera type (front/back).
useFonts loads custom fonts, with error handling.
useEffect hook here is used to request permission to access the photo library when the component mounts.

We use the useFonts hook from Expo to import the "BebasNeue-Regular" font and load it. The onLayoutRootView function, using useCallback, hides the splash screen when fonts are loaded. If fonts are not yet loaded, it returns null to prevent rendering.

pickImage function uses ImagePicker from Expo to launch the device's image library. It configures the picker with options like allowed media types, editing capabilities, aspect ratio, and quality. If the user selects an image (!result.cancelled), it updates the state variables setSelectedImage and setImageUrl with the URI of the selected image.

handlePress function is triggered when the user presses the Process button to submit the image for processing. It sets the loading state to true to show an activity indicator. Calls the onSubmit function (provided as a prop) with the imageUrl as an argument, which triggers the image processing logic.

submitImage function toggles the camera screen.

cancelCamera function when the user cancels or exits the camera screen.

The UI is conditionally rendered based on the toggleCamera state. If toggleCamera is true, it shows the CameraScreen, passing various props for handling the camera functionality; otherwise, it displays the main ImageForm UI.

Finally, create a new CameraScreen.js file and copy the following code into it:

import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  StyleSheet,
  Button,
} from "react-native";
import { Camera } from "expo-camera";
import { Capture, Submit, Back, Reset } from "../assets";

const CameraScreen = ({
  cancelCamera,
  submitImage,
  setImageUrl,
  capturedImage,
  setCapturedImage,
  setSelectedImage,
  permission,
  type,
}) => {
  const takePicture = async () => {
    if (cameraRef) {
      const photo = await cameraRef.takePictureAsync();
      setCapturedImage(photo);
      setImageUrl(photo.uri);
      setSelectedImage(photo.uri);
    }
  };

  const resetImage = () => {
    setCapturedImage(null);
    setImageUrl(null);
    setSelectedImage(null);
  };

  if (!permission) {
    // Camera permissions are still loading
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: "center" }}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

  return (
    <View style={styles.container} testID="camera-screen">
      <Camera
        style={styles.camera}
        type={type}
        ref={(ref) => (cameraRef = ref)}
      >
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={takePicture}
            testID="capture-button"
          >
            <Image
              source={Capture}
              style={styles.imageIcon}
              resizeMode="contain"
            />
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={cancelCamera}>
            <Image
              source={Back}
              style={styles.imageIcon}
              resizeMode="contain"
            />
          </TouchableOpacity>
          {capturedImage && (
            <TouchableOpacity style={styles.button} onPress={resetImage}>
              <Image
                source={Reset}
                style={styles.imageIcon}
                resizeMode="contain"
              />
            </TouchableOpacity>
          )}
          {capturedImage && (
            <TouchableOpacity style={styles.button} onPress={submitImage}>
              <Image
                source={Submit}
                style={styles.imageIcon}
                resizeMode="contain"
              />
            </TouchableOpacity>
          )}
        </View>
      </Camera>

      {capturedImage && (
        <View style={styles.imagePreviewContainer}>
          <Text style={{ textAlign: "center", marginBottom: 15 }}>
            Captured Image Preview
          </Text>
          <Image
            source={{ uri: capturedImage.uri }}
            style={styles.imagePreview}
          />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "transparent",
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: "flex-end",
    alignItems: "center",
  },
  cameraContainer: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "space-between",
    margin: 20,
    width: "100%",
  },
  buttonText: {
    fontSize: 18,
    color: "white",
  },
  imagePreviewContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  imagePreview: {
    width: "80%",
    height: "80%",
    resizeMode: "contain",
  },
  imageIcon: {
    width: 30,
    height: 30,
  },
});

export default CameraScreen;

takePicture function captures a photo using the cameraRef and updates state variables (setCapturedImage, setImageUrl, setSelectedImage).
resetImage function resets the captured image and associated state variables.

Then we check whether camera permissions are still loading or not granted. Renders a message to grant permission if needed.

Congratulations on making it this far! Now, let's perform some unit testing to ensure our code behaves as expected.

Unit Testing:

Before we dive into the testing arena, let's make sure our environment is prepared. Ensure you have the necessary packages in your toolkit:

npx expo install jest-expo jest

npm install -D @testing-library/react-native

jest: jest is a JavaScript testing framework widely used for testing JavaScript code, including React and React Native applications. It provides a test runner, assertion library, and mocking capabilities.
jest-expo: jest-expo is a Jest preset specifically designed for Expo projects. It configures Jest with settings optimized for Expo and React Native development, making it easier to write and run tests in Expo projects.
@testing-library/react-native: @testing-library/react-native is part of the Testing Library family and provides utilities for testing React Native components. It encourages testing components in a way that simulates user interactions and ensures the application behaves as expected.

Include the Jest configuration in your package.json file like this:

...

"scripts": {
    ...
    "test": "jest"
},
"jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
    ]
  },

...

This configuration ensures that Jest ignores certain modules during the transformation process, preventing potential issues with Expo and related dependencies.

Writing Our Script

Create a App.test.js file with the following content:

import React from "react";
import axios from "axios";
import { render, waitFor, fireEvent, act } from "@testing-library/react-native";
import { Camera } from "expo-camera";
import ImageForm from "./ImageForm";
import App from "./App";

jest.mock("axios");

jest.mock("expo-image-picker", () => ({
  ...jest.requireActual("expo-image-picker"),
  requestMediaLibraryPermissionsAsync: jest.fn(),
}));

describe("App", () => {
  describe("ImageForm Component", () => {
    it("renders correctly", async () => {
      require("expo-image-picker").requestMediaLibraryPermissionsAsync.mockResolvedValue(
        {
          status: "granted",
        }
      );

      const { getByText, getByPlaceholderText } = render(<ImageForm />);

      await waitFor(() => {
        expect(getByText("Image Captioner! 🤗")).toBeTruthy();
      });
      await waitFor(() => {
        expect(getByPlaceholderText("Enter Image Link")).toBeTruthy();
      });
    });

    it("handles submit button press correctly", async () => {
      const mockOnSubmit = jest.fn();
      const { getByPlaceholderText, getByText, getByTestId } = render(
        <ImageForm onSubmit={mockOnSubmit} />
      );

      const input = getByPlaceholderText("Enter Image Link");
      const submitButton = getByText("Process");

      fireEvent.changeText(input, "https://example.com/image.jpg");

      fireEvent.press(submitButton);

      await waitFor(() => {
        expect(mockOnSubmit).toHaveBeenCalledWith(
          "https://example.com/image.jpg"
        );
      });
    });

    it("handles image URL submission and displays the generated caption", async () => {
      const mockCaption = "Mock Caption";
      axios.post.mockResolvedValue({ data: [{ generated_text: mockCaption }] });
      const { getByPlaceholderText, getByText } = render(<App />);
      const input = getByPlaceholderText("Enter Image Link");
      await act(() => {
        fireEvent.changeText(input, "https://example.com/image.jpg");
      });
      await act(() => {
        const submitButton = getByText("Process");
        fireEvent.press(submitButton);
      });
      await waitFor(() =>
        expect(getByText(`🪄 ${mockCaption} 🪄`)).toBeTruthy()
      );
    });
  });

  describe("CameraScreen Component", () => {
    it("shows camera if permissions are granted", async () => {
      jest
        .spyOn(Camera, "useCameraPermissions")
        .mockReturnValue([{ granted: true }, () => Promise.resolve({})]);

      const { getByTestId, getByText } = render(<App />);
      await act(() => {
        fireEvent.press(getByText("Take Photo"));
      });

      const camera = getByTestId("camera-screen");
      expect(camera).toBeTruthy();
    });

    it("takes a picture and displays preview", async () => {
      jest
        .spyOn(Camera, "useCameraPermissions")
        .mockReturnValue([{ granted: true }, () => Promise.resolve({})]);

      jest
        .spyOn(Camera.prototype, "takePictureAsync")
        .mockImplementation(() => {
          return Promise.resolve({
            uri: "file://some-file.jpg",
          });
        });

      const { getByTestId, getByText } = render(<App />);

      fireEvent.press(getByText("Take Photo"));

      const captureButton = getByTestId("capture-button");

      fireEvent.press(captureButton);
      await waitFor(() => {
        expect(getByText("Captured Image Preview")).toBeTruthy();
      });
    });
  });
});

Mocking Axios and Expo's image picker is also for testing purposes.

"renders correctly":
The test sets up a mock for requestMediaLibraryPermissionsAsync to simulate the permission being granted. Then, it renders the ImageForm component, and asserts that the component renders the expected text "Image Captioner! 🤗" and includes a placeholder for entering an image link.

"handles submit button press correctly":
It creates a mock function (mockOnSubmit) to simulate the onSubmit function, and simulates changing the text in the input field to a sample image link and presses the Process button. It asserts that the onSubmit function is called with the expected image URL.

"handles image URL submission and displays the generated caption":
It mocks the Axios POST request to simulate generating a caption for an image URL. Simulates changing the text in the input field to a sample image link and pressing the "Process" button. It asserts that the generated caption is displayed in the expected format.

"shows camera if permissions are granted":
It spies on the useCameraPermissions function to simulate that camera permissions are granted. Renders the App component. Simulates pressing the Take Photo button, and finally, it asserts that the camera screen is displayed when permissions are granted.

"takes a picture and displays preview":
Again, it spies on useCameraPermissions to simulate that camera permissions are granted and takePictureAsync to mock taking a picture. Simulates pressing the Take Photobutton and then the capture button. It asserts that the captured image preview is displayed.

These were just a few testing scenarios to get you started, but the possibilities are endless. Feel free to explore and add more scenarios that cover different aspects of your application. Think about a specific scenario or functionality you want to test. It could be related to user interactions, edge cases, or error handling.

Full code is available for reference on GitHub here

Conclusion:

And there you have it – your very own Image Captioner is ready! But wait, what if we sprinkle a bit more magic? How about adding language translation feature to those captions? – there's always room for more creativity. You could explore more advanced models, tweak parameters, or even consider deploying your app to the cloud for broader accessibility.

Catch you in the next one. Take care! 🚀✨

Build a CRUD DApp using Solidity | Nextjs | Thirdweb | Tailwind CSS

Mohamed Elgazzar — Sat, 04 Mar 2023 21:56:36 +0000

Hey there, today we are going to be learning how to create the CRUD operations in Web3 by building a simple Blog DApp. In this tutorial we will:

Build a Solidity smart contract that will hold the blog's content and allow users to interact with it.
Deploy the smart contract to the Mumbai TestNet, and perform the Web3 interactions on the Frontend using Thirdweb.
Build the frontend using Nextjs.
Style our blog using Tailwind CSS.

By the end of that tutorial, you'll have a full-stack CRUD DApp, that you can build your Web3 knowledge upon, whether you are new to the technology, or just need to refresh your basics.

Without further ado, let's dive right in and get started!

Let's start by opening up the terminal and creating a new directory for our project

mkdir Next3Blog && cd Next3Blog

Here we are calling it Next3Blog but you can call it whatever you want.

After that, we are going to create a new Thirdweb project, that will contain our smart contract logic

Run the following command

npx thirdweb@latest create --contract

It should prompt a few questions that will help setup the environment based on our needs

I set the project name to web3, picked Hardhat as our development environment framework, set BlogContract as the name of our smart contract, and finally, chose to initiate the project with an empty contract.

Navigate to the newly generated folder and take a look at the directory structure

cd web3

After navigating to the project folder, you will find the contracts directory which contains a single smart contract.

Building a Smart Contract using Solidity:

Solidity is a powerful high-level programming language. It's very similar to JavaScript, but it's essentially designed and used to write smart contracts on the Ethereum blockchain.

Open the contract file and copy the following code into it

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


contract BlogContract {
   struct Post {
        uint postId;
        address owner;
        string postContent;
        bool isDeleted;
    }

    mapping(uint => address) blogOwners;
    Post[] private posts;
}

We start by specifying the compiler version for the smart contract.

Then, we declare Post struct as a custom data type for our blog posts. It contains four variables, postId as uint which represents an unsigned (positive) integer, postContent as a string, isDeleted as a boolean.

mapping is a hash table that allows us to associate a key with a value, so in the above code we define a blogOwners mapping of a unit key, and address value.

After that, we declare a private posts array of type Post. The private keyword makes the array inaccessible from outside the contract.

Adding posts:

  function addPost(string memory postContent) external {
       uint postId = posts.length;
       address owner = msg.sender;
       posts.push(Post(postId, owner, postContent, false));
       blogOwners[postId] = owner;
   }

In Solidity, a function parameter must be declared with a specific data type since it's a typed language.

In the above code, we are defining the addPost function, with a string parameter. memory is used to store data temporarily during the execution of a function, and will be deleted from memory once the function returns.

external makes the function visible from outside the contract only, and cannot be called from within the contract itself.

We then assign a couple of variables, postId of type unit, and owner of type address.

msg.sender refers to the address that called the function.

After that, we use the Post struct to define the post variables and push it to the posts array. And finally, we map the postId to the blog owner address.

In Solidity, events are used as a way to notify external systems or contracts about specific actions that occur within a contract.

Let's assign the AddPost event that will serve as a notifier when a new post is registered.

contract BlogContract {
   event AddPost(address owner, uint postId);
   ...
}

Now we add emit to the addPost function to trigger the event.

function addPost(string memory postContent) external {
       ...
       emit AddPost(owner, postId);
}

Deleting posts:

function deletePost(uint postId) external {
       require(blogOwners[postId] == msg.sender, "You are not the owner of this post");
       posts[postId].isDeleted = true;
   }

Here we are defining a function that takes a single parameter postId of type uint, and then checking if the caller address is the owner of the post. require checks for the validity of the condition and it will revert the transaction and display the error message that we set.

Once data is written to the blockchain, it can’t be deleted as it becomes a permanent part of the blockchain’s history. However, we can "soft-delete" it. Remember the variable isDeleted that we added above? We are initially assigning it to false, and we will simply modify it to be true, which will create an illusion of deleting it.

Later on, when implementing the getPosts function we will filter the data, and only return data with the isDeleted set to false.

Let's now declare the DeletePost event


contract BlogContract {
   ...
   event DeletePost(uint postId, bool isDeleted);
   ...

   function deletePost(uint postId) external {
      ...
      emit DeletePost(postId, true);
   }

}

Getting posts:

function getPosts() external view returns (Post[] memory){
        Post[] memory temporary = new Post[](posts.length);
        uint counter = 0;
        for (uint i = 0; i < posts.length; i++) {
            if (posts[i].isDeleted == false) {
                temporary[counter] = posts[i];
                counter++;
            }
        }
        Post[] memory result = new Post[](counter);
        for (uint i = 0; i < counter; i++) {
            result[i] = temporary[i];
        }
        return result;
    }

A view function allows read-only access to the data stored in the contract and since it doesn't modify the state of the contract or blockchain, it doesn't require any transaction to be sent to the blockchain making it a lightweight operation.

As I mentioned earlier, we are gonna loop through the posts array, and only return posts with the isDeleted set to false.

First, we declare a temporary array of type Post, with a size equal to the length of the posts array.

Note that when declaring an array with the memory keyword, you need to specify the size of the array because Solidity doesn't support dynamic array resizing in memory.

Then we assign a counter variable that will track the number of the non "deleted" posts.

Then we loop through the posts array and store the non deleted posts inside the temporary array.

Since the temporary array may still have extra slots for the deleted posts, we need to declare another array of length counter to ensure that the final result array is of the exact size of the non-deleted posts.

Now that we finished implementing the contract, we need to deploy it to the blockchain. In the project directory you will find hardhat.config.js, this file contains all of our configuration settings of our development environment.

Navigate to the file and copy the code below into it:

module.exports = {
  solidity: {
    version: '0.8.9',
    defaultNetwork: 'mumbai',
    networks: {
      hardhat: {},
      mumbai: {
        url: 'https://rpc.ankr.com/polygon_mumbai',
        accounts: [`0x${process.env.PRIVATE_KEY}`]
      }
    },
    settings: {
      optimizer: {
        enabled: true,
        runs: 200,
      },
    },
  },
};

Here we are specifying the settings for the Hardhat project.

We declare the version of the compiler, the defaultNetwork as the Mumbai Testnet and defining the network configurations, we specify the URL of the RPC endpoint "https://rpc.ankr.com/polygon_mumbai" and the account to use for deployment.

optimizer is a tool that tries to reduce the gas cost of a smart contract by optimizing its bytecode, and setting the optimizer to 200 means that it will run the optimizer for a maximum of 200 times. The more times the optimizer runs, the more aggressive it is in optimizing the bytecode, but it also takes longer to compile the contract.

Now head to your browser and download the MetaMask wallet extension.

Follow the instructions to create a new wallet and don't forget to save the secret recovery phrase.

After you successfully set up your wallet, head to the extension and add the Mumbai TestNet to your networks.

Network name: Mumbai TestNet
New RPC URL: https://rpc.ankr.com/polygon_mumbai
Chain ID: 80001
Currency symbol: MATIC

Now copy the private key as shown here. That will give access to the wallet account and enable us to deploy the contract using it

For security purposes we need to add the private key into .env file

We need to install dotenv to be able to load and manage the environment variables from the .env file into the process environment.

npm install dotenv --save

When deploying the contract, it requires a certain amount of MATIC to cover the transaction fees.

Let's now get some MATIC faucet (https://faucet.polygon.technology/)

Head to https://faucet.polygon.technology and copy your wallet address into the input, click submit, and you should get a small amount of MATIC in a few moments.

This should be sufficient to deploy our contract.

Now open your terminal and run the deployment command

npm run deploy

This is a thirdweb script that will detect any contract inside the directory and compile it, upload the ABI to IPFS and generate a deployment link.

Open the link in your browser and click the deploy button to deploy the contract to the blockchain

Thirdweb will generate a dashboard to manage and interact with the deployed contract conveniently. Copy the contract address and put it to the side now, we are gonna use it later when we move on to the Frontend part.

Navigate to Explorer and play around with the contract functions

Nextjs

Next.js is an open-source React framework that provides server-side rendering, and makes it easier to build and optimize complex web applications.

We'll start by setting up our development environment and create a Nextjs app

Navigate to the root directory and copy the command below into your terminal

npx create-next-app@latest client

You will be prompted with a bunch of questions in the terminal

After it finishes installing the project dependencies, navigate to the project directory.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework and a design system that provides you with pre-built classes to style your elements and create consistent and responsive web pages.

So, let's say you have a button element and you want to change its background color to gray, you can simply add bg-gray-500 - Assigning the value as 500 means that the color is gonna have a mid-level shade.

Setting up Tailwind CSS:

Let's first install the Tailwind CSS dependencies

npm install -D tailwindcss postcss autoprefixer

PostCSS and autoprefixer apply additional optimizations and ensure that the generated classes work on all browsers without worrying about the compatibility issues.

Initialize Tailwind CSS in our project

npx tailwindcss init -p

That will generate two files npm tailwind.config.js and postcss.config.js.

Inside tailwind.config.js copy the code below

module.exports = {
  content: [
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        openSans: ['Open Sans', 'sans-serif']
      }
    },
  }
}

Here we are adding the paths to all of the expected template files to contain Tailwind styles, and the font we're gonna use in the project.

Then you navigate to ./src/styles/globals.css and add the Tailwind directives and the link for the font.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

Now we are ready to start building our UI

Here is a closer look to the final view of what we are building

In the pages directory, you will find index.js. This will be our main page.

In the src directory create components directory, and inside of it create four new files Navbar.js, Form.js, Post.js, and index.js.

Add a utils folder and inside of it create index.js

By now the src directory tree should look like this

Copy the code below into ./pages/index.js

export default function App() {

  return (
    <div className="bg-[#eff2f5] flex flex-col min-h-screen">



    </div>
  )
}

As you can see, the tailwind classes that we are adding here are self-explanatory, we are simply setting the background color to #eff2f5, the display to flex, the flex direction to flex column, and the min height to 100vh.

Let's install an additional package before we implement the Navbar

npm i react-identicons --save

Identicons provide a visual representation to wallet addresses. They are typically generated using an algorithm that takes the wallet address as input and produces a unique image based on that input.

Navigate to Navbar.js and copy the following code into it

import Identicon from 'react-identicons';
export default function Navbar() {
 return (
   <div className="bg-white">
       <div className="px-5 py-2 flex items-center justify-between shadow-md">
           <h2 className="font-openSans font-bold text-gray-600 font-medium">
               Next3Blog
           </h2>
           <div className="border border-[#c7cacd] text-gray-600 px-2 py-1 rounded-[12px] inline-flex items-center">
               <div className="w-8 h-8 mr-2 rounded-full overflow-hidden border border-[#c7cacd] flex justify-center ">
                   <Identicon string={"0x34710CdeC3e80A174cb384870B3Ff2854d5556ce"} size={30}/>
               </div>
               <h2 className="font-openSans text-black text-[12px]">0x34710CdeC3e80A174cb384870B3Ff2854d5556ce</h2>
           </div>   
       </div>
   </div>
 )
}

Notice how we are using the font that we previously declared in the tailwind.config.js.

To save space, and make the UI more compact, let's shorten the wallet address that we are displaying on the Navbar. This is a convention in DApps to represent the address in a user-friendly way.

Navigate to ./utils/index.js and add the following function

export const truncateAddress = (address) => {
   return address.substring(0, 6) + '...' + address.substring(address.length - 4, address.length)
};

This truncates the address to show the first 6 characters and the last 4 characters, with an ellipsis (...) in between.

Let's import the function in Navbar.js and call the function with the temporary address.

...               
<h2 className="font-openSans text-black text-[12px]">{truncateAddress(address)}</h2>
...

Next, navigate to Form.js

import Identicon from 'react-identicons';
export default function Form() {
 return (
   <form className="lg:w-1/2 flex flex-col w-full h-full bg-white overflow-hidden mb-[50px] shadow-md rounded-[8px] py-5 px-10 box-border">
       <div className="w-full inline-flex justify-between items-center mb-4">
       <div className="w-12 h-12 rounded-full overflow-hidden border border-[#c7cacd] flex justify-center ">
           <Identicon string={"0x34710CdeC3e80A174cb384870B3Ff2854d5556ce"} size={45}/>
       </div>
       <div className="w-4/5 lg:w-[90%]">
           <input type="text" id="post" className="font-openSans w-full p-3 text-md border rounded-[22px] focus:outline-none focus:shadow-outline" placeholder="Share Your Thoughts and Ideas!" />
       </div>
       </div>
       <div className="w-full justify-center items-center">
       <button className="w-full bg-[#1974E7] px-2 py-2 rounded-[6px] flex justify-center cursor-pointer disabled:opacity-50 disabled:cursor-default" type='submit'>
           <h2 className='font-openSans text-white transition'>Publish</h2>
       </button>
       </div>
   </form>
 )
}

w-4/5: Sets the width to 75%
lg:w-[90%]: Sets the width to 90% on large screens

Navigate to Post.js

import Identicon from 'react-identicons';
import { truncateAddress } from '@/utils';


export default function Post() {
 return (
   <div className="lg:w-1/2 flex flex-col w-full h-full bg-white overflow-hidden mb-6 shadow-md rounded-[8px] pt-2 pb-5 px-6 box-border">
       <div className="w-full inline-flex justify-between items-center mb-4">
         <div className="inline-flex items-center">
           <div className="w-[40px] h-[40px] flex justify-center rounded-full overflow-hidden flex-shrink-0 border border-[#c7cacd]">
             <Identicon string={"0x34710CdeC3e80A174cb384870B3Ff2854d5556ce"} size={35} />
           </div>
           <div className="flex-1 pl-2">
             <h2 className="font-openSans text-black mb-1">{truncateAddress("0x34710CdeC3e80A174cb384870B3Ff2854d5556ce")}</h2>
           </div>
         </div>
           <button className="w-[10px] cursor-pointer">
             <svg className="fill-current w-3 h-3" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.878px" height="122.88px" viewBox="0 0 122.878 122.88" enableBackground="new 0 0 122.878 122.88" xml-space="preserve">
               <g>
                 <path d="M1.426,8.313c-1.901-1.901-1.901-4.984,0-6.886c1.901-1.902,4.984-1.902,6.886,0l53.127,53.127l53.127-53.127 c1.901-1.902,4.984-1.902,6.887,0c1.901,1.901,1.901,4.985,0,6.886L68.324,61.439l53.128,53.128c1.901,1.901,1.901,4.984,0,6.886 c-1.902,1.902-4.985,1.902-6.887,0L61.438,68.326L8.312,121.453c-1.901,1.902-4.984,1.902-6.886,0 c-1.901-1.901-1.901-4.984,0-6.886l53.127-53.128L1.426,8.313L1.426,8.313z"></path>
               </g>
             </svg>
           </button>
       </div>
       <div className="w-full justify-center items-center">
         <p className='font-openSans'>Sample Blog post</p>
       </div>
     </div>
 )
}

Now to better organize our components export them in the ./components/index.js file

export { default as Navbar } from './Navbar';
export { default as Form } from './Form';
export { default as Post } from './Post';

After that, we import our components to our main page ./pages/index.js

...
import { Navbar, Form, Post } from "@/components";
...
 return (
   <div className="bg-[#eff2f5] flex flex-col min-h-screen">
     <Navbar />
     <div className="pt-12 pb-6 flex flex-col items-center justify-center">
       <Form />
       <Post />
     </div>
   </div>
 )
}

Thirdweb Integrations:

Now that we are done creating the base UI for our app. Let's start the Web3 integrations to be able to interact with our contract

Install the dependencies

npm i @thirdweb-dev/sdk @thirdweb-dev/react --save

Navigate to ./pages/_app.js and copy the following code into it

import Head from 'next/head';
import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react';
import '@/styles/globals.css'


export default function App({ Component, pageProps }) {
 return (
   <ThirdwebProvider network={ChainId.Mumbai}>
     <Head>
       <title>Next3Blog</title>
     </Head>
     <Component {...pageProps} />
   </ThirdwebProvider>
 )
}

Here we are wrapping the app with the Thirdweb provider, and setting the network to the Mumbai chain id.

Inside ./pages/index.js copy the following code

import { useMetamask, useAddress } from "@thirdweb-dev/react";
export default function App() {
 const connect = useMetamask();
 const address = useAddress();

We import a couple of hooks provided by Thirdweb, we're gonna need a useMetamask to connect the app to Metamask wallet and useAddress that gets the connected address

Then we pass both hooks to the Navbar component and address to the Form and Post.

...
<div className="bg-[#eff2f5] flex flex-col min-h-screen">
 <Navbar
   connect={connect}
   address={address}
 />
 <div className="pt-12 pb-6 flex flex-col items-center justify-center">
   <Form
     address={address}
   />
   <Post
     address={address}
   />
 </div>
</div>
...

Let's implement the connect wallet functionality in the Navbar

export default function Navbar({ connect, address }) {
 return (
   <div className="bg-white">
       ...
       { address ?
           <div className="border border-[#c7cacd] text-gray-600 px-2 py-1 rounded-[12px] inline-flex items-center">
               <div className="w-8 h-8 mr-2 rounded-full overflow-hidden border border-[#c7cacd] flex justify-center ">
                   <Identicon string={address} size={30}/>
               </div>
               <h2 className="font-openSans text-black text-[12px]">{truncateAddress(address)}</h2>
           </div> :
           <button className="group/item border border-[#c7cacd] text-gray-600 px-2 py-1 rounded-[12px] inline-flex items-center cursor-pointer hover:bg-[#1974E7] hover:text-white transition"
               onClick={() => connect()}
           >
               <h2 className='font-openSans group-hover/item:text-white text-[#1974E7] transition'>Connect Wallet</h2>
           </button>
       }
       ...
   </div>
 )
}

Here we are doing conditional rendering, so we show the address if there is a connected address, or else show the connect button

Back to index.js

We import useContract to be able to connect to our contract and pass our smart contract address to it.

import { ..., useContract } from "@thirdweb-dev/react";
...
export default function App() {
...
const { contract } = useContract("0x1e55A7D8c854c239cD30EA737700D1C7d7273395");

Now let's do our first contract call



...
 const [posts, setPosts] = useState([]);
...
const getPosts = async () => {
   try {
     const posts = await contract.call('getPosts');
     const parsedPosts = posts.map((post, i) => ({
       owner: post.owner,
       postContent: post.postContent,
       id: post.postId.toNumber()
     }));
     setPosts(parsedPosts);
   }
   catch (err) {
     console.error("contract call failure", err);
   }
 }

Thirdweb makes it extremely simple to integrate our smart contract functions.
Here we are calling the getPosts function and then parsing through the returned posts array to get the values that we need. If you haven’t played around on Thirdweb dashboard and created a post, this should be returning an empty array.

Then we call the function inside useEffect to run whenever the component mounts

 useEffect(() => {
   if(contract) getPosts();
 }, [address, contract]);

we check if the contract value exists before calling getPosts, and re-runs whenever the address or contract values is updated.

Next, we map over the posts array to return a list of Post components.

{posts.map(post =>
         <Post
           key={post.id}
           id={post.id}
           owner={post.owner}
           address={address}
           postContent={post.postContent}
         />)
       }

Before we implement the create post functionality we need to keep track of the form input value, let’s declare a new useState variable and pass it down to the Form component

... 
const [text, setText] = useState('');
...
<Form
         address={address}
         setText={setText}
         text={text}
         buttonText={buttonText}
       />
...

In the Form component we set up the event listener that is triggered whenever the user types something into the input field

export default function Form({ setText, text }) {
   return (
     <form className="lg:w-1/2 flex flex-col w-full h-full bg-white overflow-hidden mb-[50px] shadow-md rounded-[8px] py-5 px-10 box-border">
          ...


         <div className="w-4/5 lg:w-[90%]">
             <input type="text" id="post" className="font-openSans w-full p-3 text-md border rounded-[22px] focus:outline-none focus:shadow-outline" placeholder="Share Your Thoughts and Ideas!"
                 value={text}
                 onChange={e=>setText(e.target.value)}
             />
         </div>

         ...
      </form>
   )
 }

Navigate back to index.js and let’s implement publishPost function

 const [publishLoading, setPublishLoading] = useState(false);

We declare publishLoading state variable to track the loading state while executing the function

const publishPost = async (text) => {
   if(text.length > 0 && contract){
     try {
       setPublishLoading(true);
       const data = await contract.call('addPost', text);
       if(data.receipt.status === 1){
         getPosts();
         setText('');
       }
       return data;
     } catch (err) {
       console.error("contract call failure", err);
     } finally {
       setPublishLoading(false);
     }
   }
 }

Here we are calling the addPost function and passing the input text to it, after checking if the text input is not empty and the contract exists.

If the transaction was successful, we call the getPosts function, and clear out the input field.

Next, we pass the function down to the Form component

...
<Form
         ...
         publishPost={publishPost}
         ...
       />
...

Then we update the Form component to trigger the publishPost on submit

export default function Form({ ... text, publishPost }) {
   return (
     <form className="lg:w-1/2 flex flex-col w-full h-full bg-white overflow-hidden mb-[50px] shadow-md rounded-[8px] py-5 px-10 box-border" onSubmit={() => publishPost(text)}>
          ...
      </form>
   )
 }

Now we implement the deletePost function

onst deletePost = async (id) => {
   try {
     const data = await contract.call('deletePost', id);
     if(data.receipt.status === 1){
       getPosts();
     }
     return data;
   } catch (err) {
     console.error("contract call failure", err);
   }

Similar to the functions we implemented earlier, we call the deletePost function and passing the post id to it, and pass it down to Post component

{posts.map(post =>
         <Post
           ...
           deletePost={deletePost}
         />)
       }

Update Post.js

export default function Post({ ... id, owner, address, deletePost }) {
 return (
   <div className="lg:w-1/2 flex flex-col w-full h-full bg-white overflow-hidden mb-6 shadow-md rounded-[8px] pt-2 pb-5 px-6 box-border">
               { owner === address &&
           <button className="w-[10px] cursor-pointer" onClick={() => deletePost(id)}>
             <svg className="fill-current w-3 h-3" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.878px" height="122.88px" viewBox="0 0 122.878 122.88" enableBackground="new 0 0 122.878 122.88" xml-space="preserve">
               <g>
                 <path d="M1.426,8.313c-1.901-1.901-1.901-4.984,0-6.886c1.901-1.902,4.984-1.902,6.886,0l53.127,53.127l53.127-53.127 c1.901-1.902,4.984-1.902,6.887,0c1.901,1.901,1.901,4.985,0,6.886L68.324,61.439l53.128,53.128c1.901,1.901,1.901,4.984,0,6.886 c-1.902,1.902-4.985,1.902-6.887,0L61.438,68.326L8.312,121.453c-1.901,1.902-4.984,1.902-6.886,0 c-1.901-1.901-1.901-4.984,0-6.886l53.127-53.128L1.426,8.313L1.426,8.313z"></path>
               </g>
             </svg>
           </button>
         }      


     </div>
 )
}

Here we are checking if the owner of the post has the same address that is connected to the app, and if so showing the close button.

One final thing that is left, let's add some conditional styles and text to the submit button. We need to disable it if the app is not connected to the wallet or not connected to the Mumbai network, or if the publishLoading state variable is true.

index.js

... 
const buttonText = !address ? "Connect Wallet" : chainId !== ChainId.Mumbai ? "Connect to the Mumbai TestNet" : publishLoading ? "Loading..." : "Publish";
 const buttonDisabled = !address || chainId !== ChainId.Mumbai || publishLoading;
...

Path both variables to Form component

<Form
        ...
         buttonDisabled={buttonDisabled}
         buttonText={buttonText}
       />

Update Form.js

export default function Form({ ... buttonText, buttonDisabled }) {
 return (
   <form className="lg:w-1/2 flex flex-col w-full h-full bg-white overflow-hidden mb-[50px] shadow-md rounded-[8px] py-5 px-10 box-border" onSubmit={() => publishPost(text)}>


       ...


       <div className="w-full justify-center items-center">
       <button className="w-full bg-[#1974E7] px-2 py-2 rounded-[6px] flex justify-center cursor-pointer disabled:opacity-50 disabled:cursor-default" type='submit' disabled={buttonDisabled} onClick={() => publishPost(text)}>
           <h2 className='font-openSans text-white transition'>{buttonText}</h2>
       </button>
       </div>


   </form>
 )
}

Notice how we are using the Tailwind's disabled: modifier to customize the disabled style.

And that's a wrap!

Full code can be found in the github repo here.

Conclusion:

Whew, you made it to the end of the tutorial! You now have a solid understanding of how to build a full-stack dApp using some of the coolest and trendiest technologies out there. To take your learning further, you can add the update functionality to the post content, loading state for getPosts, and you can also use packages like Draft.js to add a customizable text editor instead of the simple input that we implemented. Additionally, you can implement user profile routing.

Thanks for following along. Have a good one!

Building a Form using React Native and Animated API with Unit testing

Mohamed Elgazzar — Mon, 16 Jan 2023 11:37:20 +0000

React Native is a cross-platform mobile development framework based on JavaScript and Node.js. It allows you to build mobile applications for Android and iOS without writing code for each platform.

In this article, I'm going to walk you through building a simple form using Formik, perform some basic validations and unit testing, and then add a little bit of animations using the Animated API.

We are going to use Expo to set up our development environment, so let's first install Expo CLI globally.

npm install -g expo-cli

Now let's create an Expo project

npx create-expo-app react-native-formik

Once the installation finishes, you can run the app using the following command

expo start

You can view the app using the Xcode or Android Studio simulator, or scan the QR code shown on your terminal after you download the Expo Go app from the App Store or Google play, to be able to run the app on your mobile phone.

Let's now do some coding!

We will start by installing Formik

npm install formik --save

Formik is a lightweight form library for ReactJS and React Native. It provides you with a reusable form component which reduces a lot of boilerplate code and simplifies handling the three most annoying parts in the form building process:

Getting values in and out of form state
Validation and error messages
Handling form submission

Copy the code below into App.js

import React from "react";
import {
  TextInput,
  Pressable,
  Text,
  View,
  StyleSheet
} from "react-native";
import { Formik } from "formik";

export default function App() {
  return (
    <View style={styles.container}>
      <Formik
        initialValues={{ username: "", email: "" }}
        onSubmit={(values) => console.log(values)}
      >
        {({
          handleSubmit,
          handleChange,
          values
        }) => {
          return (
            <View>
              <TextInput
                onChangeText={handleChange("username")}
                value={values.username}
                placeholder="username"
                style={styles.input}
              />

              <TextInput
                onChangeText={handleChange("email")}
                value={values.email}
                placeholder="email"
                style={styles.input}
              />

              <View>
                <Pressable
                  style={[styles.pressable, { transform: [{ scale }] }]}
                  onPress={handleSubmit}
                  onPressIn={onPressIn}
                  testID="button"
                  onPressOut={onPressOut}
                >
                  <Text style={styles.buttonText}>submit</Text>
                </Pressable>
              </View>
            </View>
          );
        }}
      </Formik>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    width: 250,
    height: 40,
    marginBottom: 5,
    borderWidth: 2,
    padding: 5,
    borderColor: "#000",
  },
  pressable: {
    width: 250,
    height: 40,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#000",
  },
  text: {
    color: "#000",
  },
  buttonText: {
    color: "#fff",
  },
});

Here we are setting the Formik component

Notice that React Native does not provide a form component, so we are setting Formik and inside of it we are importing View as a wrapper for our form components, you can think of View as the equivalent of div in web development.

Button component supports a minimal level of customization and has no style property, so we are using Pressable as an alternative to customize our own button.

handleSubmit is auto generated from Formik to handle validation and submission.

We provide the Formik component with the initialValues object of our form. Here we are just assigning username and email.

Then we pass the handleChange method provided by Formik into the onChangeText callback in the TextField components with their corresponding key in the initialValues object.

And finally, we pass onSubmit as a prop into the Formik component, and here we are just printing the values to the console.

Validation:

Formik comes with built-in support for Yup which is a JavaScript schema builder for value parsing and validation.

Let's install Yup

npm install yup --save

Now we import Yup and create our validation schema

...

import * as Yup from "yup";

const Schema = Yup.object().shape({
  username: Yup.string().required("username is required"),
  email: Yup.string().email().required("email is required"),
});

...


 <Formik
        initialValues={{ username: "", email: "" }}
        validationSchema={Schema}
        onSubmit={(values) => console.log(values)}
 >
        {({
          handleSubmit,
          handleChange,
          values,
          errors,
          touched
        }) => {

...

{errors.username && touched.username && (
<Text style={styles.text}>{errors.username}</Text>)}{errors.email && touched.email && (
<Text style={styles.text}>{errors.email}</Text>)}

...

Here we are marking username and email as required fields, and adding the email method which uses a regex under the hood to validate the email format. Then we pass the schema into Formik's Yup config prop validationSchema, which will manage and map the error messages we set in the schema.

Unit Testing:

Unit testing is the practice of testing small pieces of code on their own, which makes it easier to track, control and refactor the code without any disruption.
We will use Jest as our test runner and Testing Library for providing the testing utilities needed for catching our components to perform actions upon them.

Let's starts by installing Expo's compatible version of Jest

npm install jest-expo jest --save-dev

Then we need to do some configurations in package.json and add the testing script

{
    ...  

    "scripts": {
      ...
      "test": "jest"
    },
    "jest": {
      "preset": "jest-expo",
      "transformIgnorePatterns": [
        "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
      ],
      "collectCoverage": true,
      "collectCoverageFrom": [
        "**/*.{js,jsx}",
        "!**/coverage/**",
        "!**/node_modules/**",
        "!**/babel.config.js",
        "!**/jest.setup.js"
      ]
    },
    ...
  }

For more info about Jest configurations, visit the official docs here

Create a new folder __tests__ in the root directory and inside of it create App.test.js which will include our tests.

Let's perform our first test case

Copy the code below into App.test.js

import React from "react";
import { render, fireEvent, waitFor } from "@testing-library/react-native";
import App from "../App";

describe("Form Validations", () => {
  it("does not show error messages when required values are fullfilled", async () => {

    });
  });
});

describe is used to organize a set of related test scenarios. Here, we are describing our testing block as "Form Validations" and it will contain all the positive and negative scenarios for the validations.

it is the method where we perform each individual test.

import React from "react";
import { render, fireEvent, waitFor } from "@testing-library/react-native";
import App from "../App";

describe("Form Validations", () => {
  it("does not show error messages when required values are fullfilled", async () => {
    const { getByPlaceholderText, queryByText, getByTestId } = render(<App />);

    let usernameInput = getByPlaceholderText("username");
    let emailInput = getByPlaceholderText("email");
    let submitButton = getByTestId("button");

    fireEvent.changeText(usernameInput, "Mohamed");
    fireEvent.changeText(emailInput, "mohamed@email.com");

    await waitFor(() => {
      fireEvent.press(submitButton);
    });

    await waitFor(() => {
      expect(queryByText("username is required")).toBeNull();
      expect(queryByText("email is required")).toBeNull();
    });
  });
});

Our first scenario is where the user has filled in all the form inputs, so here we are assuming that the required warning does not show up.

We are rendering our form and then using the testing library special queries to get the components we need to perform the test on.

getByPlaceholderText searches for the input that holds the matching placeholder we provide.

getByTestId gets the component that holds the matching testID, so let’s get back to App.js and assign a testID to the Pressable component

fireEvent is used to invoke a given event handler, so we are using it here to change the input texts and then pressing the submit button that we got above. And we are using waitFor to wait until the press event is fulfilled.

...
it("shows error messages when required values are not fullfilled", async () => {
    const { getByPlaceholderText, queryByText, getByTestId } = render(<App />);

    let usernameInput = getByPlaceholderText("username");
    let emailInput = getByPlaceholderText("email");
    let submitButton = getByTestId("button");

    fireEvent.changeText(usernameInput, "");
    fireEvent.changeText(emailInput, "");

    await waitFor(() => {
      fireEvent.press(submitButton);
    });

    await waitFor(() => {
      expect(queryByText("username is required")).toBeTruthy();
      expect(queryByText("email is required")).toBeTruthy();
    });
  });
...

The second scenario is where the user has not filled the form inputs, so we expect the required errors to show up.

toBeNull and toBeTruthy are Jest expectations to assume whether a specific component exists or not.

You can find more info about Jest expectation here

You have probably noticed how we repeatedly rendered the App component and defined the same variables in both tests, so to avoid the redundancy we use Jest's beforeEach

...
describe("Form Validations", () => {
  let getByPlaceholderText,
    queryByText,
    getByTestId,
    usernameInput,
    emailInput,
    submitButton;
  beforeEach(() => {
    ({ getByPlaceholderText, queryAllByText, queryByText, getByTestId } =
      render(<App />));
    usernameInput = getByPlaceholderText("username");
    emailInput = getByPlaceholderText("email");
    submitButton = getByTestId("button");
  });

  it("does not show error messages when required values are fullfilled", async () => {
    fireEvent.changeText(usernameInput, "Mohamed");
    fireEvent.changeText(emailInput, "mohamed@email.com");

    await waitFor(() => {
      fireEvent.press(submitButton);
    });

    await waitFor(() => {
      expect(queryByText("username is required")).toBeNull();
      expect(queryByText("email is required")).toBeNull();
    });
  });

  it("shows error messages when required values are not fullfilled", async () => {
    fireEvent.changeText(usernameInput, "");
    fireEvent.changeText(emailInput, "");

    await waitFor(() => {
      fireEvent.press(submitButton);
    });

    await waitFor(() => {
      expect(queryByText("username is required")).toBeTruthy();
      expect(queryByText("email is required")).toBeTruthy();
    });
  });
...

Now we perform the couple left scenarios where we expect whether a valid email is provided or not.

  it("does not show error message when email is valid", async () => {
    fireEvent.changeText(usernameInput, "Mohamed");
    fireEvent.changeText(emailInput, "mohamed@email.com");

    await waitFor(() => {
      fireEvent.press(submitButton);
    });

    await waitFor(() => {
      expect(queryByText("email must be a valid email")).toBeNull();
    });
  });

  it("shows error message when email is not valid", async () => {
    fireEvent.changeText(usernameInput, "Mohamed");
    fireEvent.changeText(emailInput, "mohamed");

    await waitFor(() => {
      fireEvent.press(submitButton);
    });

    await waitFor(() => {
      expect(queryByText("email must be a valid email")).toBeTruthy();
    });
  });

Run the test script and make sure 4 tests have passed successfully!

Animated API:

Unlike ReactJS and web development, where we use CSS to create animations, React Native require us to use the Animated API to build and maintain animations.

Let's import Animated so that we can get started

...
import {
  ...
  Animated,
} from "react-native";
...

We want to create a smooth transition on rendering the component for the first time, from the bottom of the screen up to the form original position in the center.

...
export default function App() {
  const translateY = useRef(new Animated.Value(100)).current;
...

So here we create an instance of Animated.Value and wrap it in a useRef so that it gets created once, and then set the initial value to 100.

}) => {
...
          return (
            <Animated.View
              style={{
                transform: [{ translateY }],
              }}
            >
...
            </Animated.View>

Then we replace the component that we want to apply the animation on which in this case is View with Animated.View, and we assign the translateY to the animated value instance we just created.

Animated exports six animatable component types: View, Text, Image, ScrollView, FlatList and SectionList, but you can also create your own using Animated.createAnimatedComponent().

...
useEffect(() => {
    Animated.timing(translateY, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, []);
...

Animated comes with helper functions that provide various animation types, for the on mount animation we will be using Animated.timing() which by default uses easeInOut curve but you can for sure pick your own easing function. After that we set the duration and target value.

To improve the animation performance, we are activating useNativeDriver which will allow native code to perform the animation directly on the UI thread.

By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.

And finally starting the animations by calling start()

Now let's add a pressing effect to the submit button

Let's create a new Animated.Value instance and set the initial value to 0

...
  const btnAnimation = useRef(new Animated.Value(0)).current;
...

For the pressing effect we need to create scaling animation

const scale = btnAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

Here we are interpolating and mapping animation with the scaling values, in other words, we are simply telling animated to set the scale value to 0.8 when the animated value is 1 and set it back to 1 when the animated value is 0.

You can find more information about interpolation in the official docs here

...
  const onPressIn = () => {
    Animated.spring(btnAnimation, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };
  const onPressOut = () => {
    Animated.spring(btnAnimation, {
      toValue: 0,
      useNativeDriver: true,
    }).start();
  };
...

Here we are using the spring animation which provides a spring physics model

...
  const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

...
<AnimatedPressable
                  style={[styles.pressable, { transform: [{ scale }] }]}
                  onPress={handleSubmit}
                  onPressIn={onPressIn}
                  testID="button"
                  onPressOut={onPressOut}
                >
                  <Text style={styles.ButtonText}>submit</Text>
                </AnimatedPressable>
...

Since Animated is not exporting Pressable we need to use createAnimatedComponent to make the component animatable, then we replace Pressable with the newly created one, and add transform with the scale value assigned to it.

Snapshot testing:

Now that we have a stable working version of our app, we can perform snapshot testing. Snapshot testing ensures that there won't be any unexpected changes in UI. It typically takes a snapshot of the UI, compares the output with a stored copy, and if it detects any change occurred to the UI, the test simply fails.

  it("renders correctly", () => {
    const tree = render(<App />).toJSON();
    expect(tree).toMatchSnapshot();
  });

Run the test

A new folder __snapshots__ should be created in __tests__, that's where your snapshot is stored.

Now try modifying any part of the form UI, and re-run the test

You will find the snapshot test fails!

Full code can be found in the github repo here.

Conclusion:

Now that you know the basics of creating an animated form in React Native, and learned how you can cut off a lot of unnecessary code with Formik, you can get the most out of this tutorial by adding more validations to the form and performing unit testing upon them, and then play around with interpolations in Animated.

Have a good one!

Build a Face Detection App using React, NodeJS and Clarifai

Mohamed Elgazzar — Sat, 17 Dec 2022 21:09:35 +0000

Computer Vision has developed rapidly in the past few years. You might have come across the AI generated avatars that are booming lately all over social media, but Computer Vision applications are more varied, from face and ID verification to self-driving cars, ecommerce and retail industries, healthcare and more.

Computer Vision is a subfield of AI that gives machines the sense of sight. Unlike human vision, a computer sees an image as just a bunch of integer values which represent intensities across the color spectrum. It uses a model which is provided by an algorithm and trained over a set of data to "learn" and recognize certain types of patterns.

Let's take the AI generated avatars as an example, the model used for that would be trained over an algorithm that uses biometrics to analyze facial features to be able to recognize and extract a face from an image, modify it and apply it to the creation of the avatar.

Without getting much into machine learning concepts as we will be building our app today using Clarifai which is a computer vision solution, let's jump right off and start coding!

We will start by building our server that will be holding the Clarifai integration logic

Open your terminal and copy the following command into it

mkdir face-detection-react-node-clarifai && cd face-detection-react-node-clarifai && mkdir server && cd server

Now that we are on the server directory we initialize our project

npm init -y

Then we install some dependencies

npm install express dotenv clarifai-nodejs-grpc --save

Let's now create index.js file

touch index.js

Now we create a simple HTTP server

Copy the following code into the file we just created

const express = require('express');
const http = require('http');
const app = express();

app.use(express.urlencoded({ extended: false }))
app.use(express.json())


const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port);
server.on('listening', () => {
    console.log(`Listening on ${port}`);
});

Now we create detect.js file which will contain the Clarifai logic

touch detect.js

Before we get into the logic, let's hop over Clarifai website and create a new account

Once you log into your account, navigate to My Apps where you will find your first application created (create one if not found), click on it, then go to App Settings, and copy the API key.

Now back to our server directory, create a new .env file and copy the following variable into it after you add the API key copied to clipboard.

CLARIFAI_AUTH_KEY=

Now we start the integration

We construct the Clarifai stub, which contains all the methods available in the Clarifai API, and the Metadata object that's used to authenticate.

const { ClarifaiStub, grpc } = require("clarifai-nodejs-grpc");
const dotenv = require('dotenv');
dotenv.config();

const metadata = new grpc.Metadata();
metadata.set("authorization", `Key ${process.env.CLARIFAI_AUTH_KEY}`);

const stub = ClarifaiStub.grpc();

We create a new promise to handle the PostModelOutputs asynchronous method, then provide the model Id that we get the predictions from. We are here using a public pre-optimized general Clarifai model.
You can dive more into public Clarifai models here

const detectFace = (inputs) => {
    return new Promise((resolve, reject) => {
        stub.PostModelOutputs(
            {
                model_id: "a403429f2ddf4b49b307e318f00e528b",
                inputs: inputs
            },
            metadata,
            (error, response) => {
                if (error) {
                    reject("Error: " + error);
                    return;
                }

                if (response.status.code !== 10000) {
                    reject("Received failed status: " + response.status.description + "\n" + response.status.details);
                    return;
                }

                let results = response.outputs[0].data.regions;
                resolve(results);
            }
        );
    })
}

We need to also supply the image that the model would process, so here we are assigning inputs which is an array that we will construct in a moment.

We should expect to receive the regions of the faces that the model predicts as a result.

Now we create a function to handle the asynchronous call that we are going to fire using the detectFace function we just created.

const handleDetect = async (req, res) => {
    try{
        const { imageUrl } = req.body;
        const inputs = [
            {
                data: {
                    image: {
                        url: imageUrl
                    }
                }
            }
        ];
        const results = await detectFace(inputs);
        return res.send({
            results
        })
    }
    catch (error) {
        return res.status(400).send({
            error: error
        })
    }
}

We construct the inputs array where we are going to assign the imageUrl that we get from the frontend input.

You can also provide the image directly by sending bytes but for this tutorial we are just going to use URLs.

Then we export the handleDetect

module.exports = {
    handleDetect
}

Let's now modify the server file index.js and add the detect route that would be called later on the frontend.

Full Code:

const express = require('express');
const http = require('http');
const detect = require('./detect');
const app = express();

app.use(express.urlencoded({ extended: false }))
app.use(express.json())

app.post('/detect', (req, res) => detect.handleDetect(req, res));

const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port);
server.on('listening', () => {
    console.log(`Listening on ${port}`);
});

Now we add the start script into package.json

"scripts": {
    "start": "node ./index.js"
 },

Start the server and make sure everything is working as expected.

Now let’s navigate to the root directory and start building our frontend.

We will use create-react-app to bootstrap our project.

Copy the command below into your terminal

npx create-react-app client && cd client

We install a couple of dependencies

npm install styled-component axios –-save

We start by specifying the proxy in package.json

  "proxy": "http://localhost:8080"

We are going to use styled-components to build our app interface.

In the src folder create components directory and inside of it create styled.js

mkdir components && cd components && touch styled.js

Copy the following code into the file

import styled from "styled-components";
import FaceDetectIcon from '../assets/FaceDetectIcon.svg';

const FaceDetectionWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`
const Title = styled.h2`
    margin: 20px 0;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    color: #383838;
`
const ImagePreviewWrapper = styled.div`
    position: relative;
    width: ${props => props.width};
    height: ${props => props.height};
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9F9FB;
    background-image: url(${FaceDetectIcon});
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 16px;
    border: 2px dashed #D2D7E5;
`
const Image = styled.img`
    border-radius: ${props => props.borderRadius};
`


const FormWrapper = styled.form`
    display: flex;
    flex-direction: column;
`
const InputWrapper = styled.input`
    width: 500px;
    height: 45px;
    margin: 12px 0;
    padding: 8px 20px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #D2D7E5;
    border-radius: 16px;
    outline: none;
`
const SubmitButton = styled.button`
    width: 500px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #576684;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 20px;
    text-align: center;
    color: #FFFFFF;
`

const FaceBox = styled.div`
  position: absolute;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
`;
const FaceBoxesWrapper = styled.div`

`;




export {
    FaceDetectionWrapper,
    Title,
    ImagePreviewWrapper,
    Image,
    FormWrapper,
    InputWrapper,
    SubmitButton,
    FaceBox,
    FaceBoxesWrapper
}

Create Form.js file where we are going to set our input

touch Form.js

Copy the code below into it

import {
  FormWrapper,
  InputWrapper,
  SubmitButton
} from './styled';


const FaceDetectionForm = ({ setInput, input, detectFaces, loading }) => {
    return(
        <FormWrapper onSubmit={detectFaces}>
            <InputWrapper type="text" placeholder="Enter Image Link" onChange={e => setInput(e.target.value)} value={input}/>
            <SubmitButton type="submit">{loading ? "Loading..." : "Detect"}</SubmitButton>
        </FormWrapper>
    )
}

export default FaceDetectionForm;

Nothing but a simple input and a submit button.

Create Preview.js file where we are going to view the image with the received face predictions

touch Preview.js

Copy the following code into it

import {
    ImagePreviewWrapper,
    Image,
    FaceBoxesWrapper,
    FaceBox
} from './styled';

const FaceDetectionPreview = ({ boxDimensions, imageUrl }) => {

    const faceBoxGenerator = (dimensions) => {
        let boxes = [];

        for(let i = 0; i < dimensions.length; i++){
            boxes.push(<FaceBox key={i}
            style={{
                top: dimensions[i].topRow, 
                right: dimensions[i].rightCol, 
                bottom: dimensions[i].bottomRow, 
                left: dimensions[i].leftCol
            }}></FaceBox>)
        }
        return <FaceBoxesWrapper>{boxes}</FaceBoxesWrapper>
    }

    return (
        <ImagePreviewWrapper width="500px" height={imageUrl ? "auto" : "300px"}>
            {imageUrl && <Image src={imageUrl}
                id="inputImage"
                alt="face detect output" 
                width='500px' height='auto'
                borderRadius="16px"
            />}
            {faceBoxGenerator(boxDimensions)}
        </ImagePreviewWrapper>          
    );
}

export default FaceDetectionPreview;

Finally, let's do our API call

We will use Axios as our HTTP client

Copy the code below into App.js

import { useState } from "react";
import axios from "axios";
import {
  FaceDetectionWrapper,
  Title
} from './styled';
import FaceDetectionForm from './Form';
import FaceDetectionPreview from './Preview';
import '../App.css';

function App() {

  const [input, setInput] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [boxDimentions, setBoxDimentions] = useState([]);
  const [loading, setLoading] = useState(false);


  const detectFaces = async (e) => {
    e.preventDefault();
    setBoxDimentions([]);
    setLoading(true);
    setImageUrl(input);
    const boxDimensionArray = []
    try {
      const detect = await axios.post('/detect', {
        imageUrl: input
      });
      const results = detect.data.results;
      results.forEach(region => {
        const faceBoxDimentions = region.region_info.bounding_box;
        const image = document.getElementById('inputImage');
        const width = Number(image.width);
        const height = Number(image.height);
        const boxDimension =  {
          leftCol: faceBoxDimentions.left_col * width,
          topRow: faceBoxDimentions.top_row * height,
          rightCol: width - (faceBoxDimentions.right_col * width),
          bottomRow: height - (faceBoxDimentions.bottom_row * height)
        }
        boxDimensionArray.push(boxDimension);
      });
      setBoxDimentions(boxDimensionArray);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  return (
    <FaceDetectionWrapper>
      <Title>Face Detection</Title>
      <FaceDetectionPreview boxDimensions={boxDimentions} imageUrl={imageUrl} />
      <FaceDetectionForm setInput={setInput} input={input} detectFaces={detectFaces} loading={loading} />
    </FaceDetectionWrapper>
  );
}

export default App;

As mentioned earlier, we should be expecting an array of predictions for the image that we provided, then we target the image width and height to be able to calculate each box’s side position.

As mentioned earlier, we should be expecting an array of predictions for the image that we provided, then we target the image’s width and height to be able to calculate each box's side positioning on the preview.

Let's now run the app et voila!

Full code can be found in the github repo here.

Conclusion:

There are a lot of computer vision and face detection applications and use cases out there, and soon this technology will go beyond and become a part of our everyday life (If it has not become already!).
I'm planning to get more into AI and Machine learning, and I will do articles and tutorials about TensorFlow and OpenCV, so follow me and keep posted!

P.S. I'm currently in the middle of building my own lab on my website.
Subscribe here and get notified when the project is launched.

Have a good one!

Build your first Web3 Chrome Extension using Typescript

Mohamed Elgazzar — Wed, 16 Nov 2022 23:27:31 +0000

Today, I'm going to walk you through the steps of building a simple web3 chrome extension that gets the ETH balance of a given wallet address.

In this tutorial, you will learn the following:

Setting up a Webpack dev environment.
Some of Typescript core concepts.
Making a Web3 call.
Creating a Chrome Extension and learning about Manifest.

I assume you have basic Javascript knowledge, so I won't get much into the code structure.

Before we start, make sure you have Nodejs and NPM installed on your machine.

Let's jump right off and start setting up our environment.

We start with initializing our project and creating the package.json file

mkdir ts-web3-extension && cd ts-web3-extension && npm init -y

Typescript:

Typescript is a strongly typed language developed and maintained by Microsoft. It’s a superset of Javascript built up on it.
Unlike Javascript which is dynamically typed, Typescript provides optional static typing and extra features that help you identify common errors and write much cleaner code.

You can install Typescript into your project or globally on your machine.

npm i typescript --save-dev

Webpack:

Webpack is a module bundler for Javascript applications, it helps bundle and optimize different files we have in the app, making the code shorter and usable on the browser.

To start building our development setup using Webpack, we need to install some dependencies:

npm i webpack webpack-cli html-webpack-plugin clean-webpack-plugin --save-dev

By default, webpack can only compile and bundle Javascript files, so we will need to use a loader which will allow us to handle Typescript files.

Copy the command below into your terminal to install ts-loader

npm i ts-loader --save-dev

Now that we have installed all the dependencies needed, let's start building our environment.

We create tsconfig.ts file in the root directory

touch tsconfig.ts

tsconfig.json indicates that this is the root of a TypeScript project.
Let's leave the file empty for now or just add {} which will let us use the compiler's defaults.

Next, we create webpack.config.js

touch webpack.config.js

Now, copy the code below into it

const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      }
    ],
  },
  plugins: [
    new HTMLWebpackPlugin(),
    new CleanWebpackPlugin(),
  ]
};

So, let’s explain each config option individually

mode basically allows you to set what kind of build you want, so here we are setting it to development in which case the build is formatted by adding line breaks and detailed comments making it look more readable. If you change that to production you will notice how the build gets minified and compressed.

entry obviously tells webpack its entry point, where it should start its magic on.

output helps us specify the name of the build file and where it should be located, so here we use Node’s path module to provide us a utility to work with directory paths instead of having to write it ourselves, then we call the file index.js.

___dirname is an env variable that returns the directory path of the current JS file, which is the root. _

After that, we set devtool to cheap-module-source-map.
By default, devtool uses eval function in its source map styling which is a bad practice and chrome doesn't allow using it, so this would remove it.

In module we specify a set of rules and here we determine how webpack will handle Typescript files using the ts-loader.

We set a regular expression in test of what file endings to run the ts-loader on, and in exclude we are telling webpack not to traverse through the node_modules dependencies.

Unlike loaders which apply changes on files before they are bundled, plugins work on the whole generated bundle and control how they are created and in which form.

Here we are adding a couple of plugins, html-webpack-plugin generates an HTML file that includes our webpack bundle using a script tag without the need to create it manually. clean-webpack-plugin simply removes all files inside the build directory after every successful rebuild.

Okay, let's move onto the main part and start building our app

We create src directory that we specified in the webpack entry and inside of it we create index.ts which will contain all of our code.

mkdir src && cd src && touch index.ts

Copy the following code into index.ts

let appEl = document.createElement('div');
appEl.setAttribute('id', 'app')
document.body.appendChild(appEl);

let app = document.getElementById('app')!;

let balanceEl = document.createElement('h2');
balanceEl.setAttribute("id", "balance");
balanceEl.innerText = "0 ETH";
app.appendChild(balanceEl);

let inputEl = document.createElement('input');
inputEl.setAttribute('type', 'text');
inputEl.setAttribute('id', 'address-input');
inputEl.setAttribute('name', 'address-input');
inputEl.setAttribute('placeholder', "Wallet Address');
app.appendChild(inputEl);


let submitEl = document.createElement('button');
submitEl.setAttribute('id', 'submit-btn');
submitEl.innerText = 'Get Balance';
app.appendChild(submitEl);

Here we create our interface for the app, just a simple input, a button and a text element.

Notice how document.getElementById('app') is followed by an exclamation mark (!). Typescript forces us to be clearer while writing our code. It's not sure that it would return something that is not null or undefined so it throws an error, and by adding the non-null assertion operator, we are stating that the element must return something that actually makes sense.

Now we build the functionality

Web3.js

web3.js is a collection of libraries written in Nodejs, used to help us interact with Ethereum nodes.

Let's start by installing the web3 dependency

npm i web3 --save

We import web3 into index.ts

const Web3 = require('web3');

Then we add the following function

const getBalance = async () => {
  submitEl.innerText = "Loading...";
  submitEl.style.pointerEvents = 'none';
  const infura = 'https://goerli.infura.io/v3/your-api-key';
  const web3 = new Web3(new Web3.providers.HttpProvider(infura));
  let addressValue = (document.getElementById('address-input') as HTMLFormElement).value;
  let balance = await web3.eth.getBalance(addressValue);
  balance = web3.utils.fromWei(balance, 'ether');
  balanceEl.innerText = balance + " ETH";
  submitEl.innerText = "Get Balance";
  submitEl.style.pointerEvents = "auto";
};

By default Typescript sets the type of an async function's return to Promise<type> because it's guaranteed that it will return a promise and since we don't typically have a return value in our function it sets the type to void.

As we mentioned earlier, Typescript forces us to be explicit, so here in addressValue we are setting document.getElementById('address-input') as HTMLFormElement just to assure that this input element has an actual value.

To connect to the Ethereum node, we pass a provider into the web3 constructor, here we are passing an HttpProvider, but you can also use WebSocketProvider which allows subscriptions and IpcProvider if the node is running locally.

We then get our network endpoint from Infura after you create an API key and pass it right into the provider.

Here we used fromWei utility to convert the balance that we get into a readable ether value.

Full code:

const Web3 = require('web3');

let appEl = document.createElement('div');
appEl.setAttribute('id', 'app')
document.body.appendChild(appEl);

let app = document.getElementById('app')!;

let balanceEl = document.createElement('h2');
balanceEl.setAttribute("id", "balance");
balanceEl.innerText = "0 ETH";
app.appendChild(balanceEl);

let inputEl = document.createElement('input');
inputEl.setAttribute("type", "text");
inputEl.setAttribute("id", "address-input");
inputEl.setAttribute("name", "address-input");
inputEl.setAttribute("placeholder", "Wallet Address");
app.appendChild(inputEl);


let submitEl = document.createElement('button');
submitEl.setAttribute("id", "submit-btn");
submitEl.innerText = "Get Balance";
app.appendChild(submitEl);

const getBalance = async () => {
  submitEl.innerText = "Loading...";
  submitEl.style.pointerEvents = 'none';
  const infura = 'https://goerli.infura.io/v3/your-api-key';
  const web3 = new Web3(new Web3.providers.HttpProvider(infura));
  let addressValue = (document.getElementById('address-input') as HTMLFormElement).value;
  let balance = await web3.eth.getBalance(addressValue);
  balance = web3.utils.fromWei(balance, 'ether');
  balanceEl.innerText = balance + " ETH";
  submitEl.innerText = "Get Balance";
  submitEl.style.pointerEvents = "auto";
};

(document.getElementById("submit-btn") as HTMLFormElement).onclick = (e) => {
  e.preventDefault();
  getBalance();
};

Now we move to the interesting part of how to turn all of that into a Chrome extension.

Chrome Extension and Manifest:

Manifest is the system that governs how Chrome extensions interact with your browser.

Let's create public in the root directory and inside of it we create manifest.json

mkdir public && cd public && touch manifest.json

In manifest.json we specify basic metadata and information about our extension such as the name, the description, the version that chrome currently supports, and aspects of the extension's functionality such as actions.

{
    "name": "Web3Balance",
    "description": "Get ETH Balance of any given address",
    "version": "1.0",
    "manifest_version": 3,
    "action": {
      "default_popup": "index.html"
    }
  }

We set the default popup which appears when the user clicks the extension's icon into the html file that webpack is going to generate for us.

Let's now install an additional plugin:

npm i copy-webpack-plugin --save-dev

copy-webpack-plugin as the name implies copies the manifest.json file that we have inside public right into the dist folder so that the manifest file is able to access the generated bundle.

Let’s now modify webpack.config.js and add the plugin into it

const HTMLWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  devtool: "cheap-module-source-map",
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",
        },
      }
    ],
  },
  plugins: [
    new HTMLWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {from: "public", to: "."}
      ],
    }),
    new CleanWebpackPlugin(),
  ]
};

Now we want to add some styling to our app and for that we will need a couple of loaders

npm i css-loader style-loader --save-dev

css-loader simply collects all of our project's css files helping webpack to resolve them, and style-loader takes the generated output and put it inside the style tags.

Let's modify webpack.config.js

const HTMLWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  devtool: "cheap-module-source-map",
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      }
    ],
  },
  plugins: [
    new HTMLWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {from: "public", to: "."}
      ],
    }),
    new CleanWebpackPlugin(),
  ]
};

Create style.css in the src directory and copy the following code into it

#app{
    width: 350px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#balance{
    margin: 0;
}

#address-input{
    width: 100%;
    height: 30px;
    padding: 6px 15px;
    margin: 20px 0;
    border: none;
    outline: none;
    border-radius: 25px;
    background-color: #f3f3f3;
}

#submit-btn{
    width: 50%;
    padding: 8px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    outline: none;
}

Now we import the file into index.ts

import './style.css';

Finally, let's add the build script into package.json

"scripts": {
    "build": "webpack"
}

Now we run the following command in our terminal

npm run build

After the build is done, you will find the dist folder created in the root directory containing the generated bundle.

Let's now head to the Chrome browser and navigate to chrome://extensions

On the top left of the page click on Load unpacked to fetch the dist directory

Et voila!

Full code can be found in the github repo here.

Conclusion:

Congrats! You just created your first ever Web3 Chrome Extension!
With Typescript you may put some more effort writing your code, however I believe the effort pays off and the benefits are worth it.
I'm planning to build more complex projects that cover a lot of in-depth Web3 topics, so keep posted!

Have a good one!

RTK Query vs Redux Saga: What to choose for your next project?

Mohamed Elgazzar — Thu, 03 Nov 2022 20:14:52 +0000

Today we're going to discuss and compare Redux Saga and RTK Query approaches for API access and async tasks. We will go through both of them and in the end, you will have all the knowledge that will help you decide which one to use in your project!

So your application is getting bigger, and you decide to use Redux as your state management for the project.

Now, you want to connect your app with an external API!

In Redux you can't dispatch asynchronous actions directly in the store, so you will typically need to install an async middleware such as Redux Thunk or Redux Saga, that will help encapsulate asynchronous side effects.

RTK provides built-in tools that can be used for API interactions such as createReduxThunk and RTK Query which is indeed built on top of cAT and other RTK APIs internally. It is purpose built for data fetching so it simplifies the async logic that is usually handwritten.

In this tutorial, I assume you have basic knowledge of React and Redux.

I'm gonna show you how to integrate Saga into plain Redux and RTK, explore some of its powerful features, and then dive into RTK Query and how it cuts down a lot of data fetching and caching logic.

Redux Saga

Redux-Saga is a powerful middleware library that allows Redux store to asynchronously interact with external APIs.

Redux-Saga uses an advanced ES6 feature called generator, it's simply a kind of function that can be paused in between the execution, similar to what happens when using async/await, which makes life easier while managing asynchronous calls.

Now let's do some coding and start building our app!

We will be setting up a simple API call that gets a list of random users - I will start with integrating Saga using plain Redux then try it out with RTK and see the difference between both integrations.

Plain Redux:

Step 1 - Initialize a React application

We will be using CRA to bootstrap our React app.
Run this command in the terminal:

npx create-react-app users-list && cd users-list

Step 2 - Setting up Redux

To set up Redux and integrate Saga we will need to install some packages:

npm install redux react-redux redux-saga --save

Let's now create our store

Create a new directory in the src folder and name it store.
Inside of it create configureStore.js
Copy the following code into the file we just created.

import { createStore, combineReducers } from 'redux';
import users from '../reducers/reducer';

export default function configureStore() {
    const reducers = combineReducers({ users });

    return {
        ...createStore(reducers)
    }
}

Now we set up the actions and root reducer

Create an actions directory in src
Create action.js file
Copy following code into it

export const GET_USERS_FETCH = 'GET_USERS_FETCH';
export const GET_USERS_SUCCESS = 'GET_USERS_SUCCESS';

export const getUsersFetch = () => ({
    type: GET_USERS_FETCH
})

Create a reducers directory in src
Create reducer.js
Copy the following code into it.

import { GET_USERS_SUCCESS } from "../actions/action";

const users = (state = { users: [] }, action) => {
    switch (action.type){
        case GET_USERS_SUCCESS:
            return { ...state, users: action.users }
        default: 
            return state;
    }
}

export default users;

Now we update index.js file in the root directory

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import configureStore from './store/configureStore';

const store = configureStore();

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Step 3 - Integrate our first Saga

Create sagas folder in the root directory
Create saga.js

As we mentioned earlier sagas are implemented using generators.
Let's create the first generator function.

Copy the code below into the saga file we just created

import { takeEvery } from "redux-saga/effects";
import { GET_USERS_FETCH } from "../actions/action";


function* getUsersSaga() {
    yield takeEvery(GET_USERS_FETCH, getUsersRequest);
}

export default getUsersSaga;

Notice the asterisk that follows the function keyword, this is how you define a generator function in ES6.

yield pauses the function until what comes after it is fulfilled, you can think of it as await in async function.

takeLatest is a special redux saga effect - Effects are simply instructions to the middleware to perform some operations

So here takeLatest fires the instance immediately and takes the latest version of data, terminating any previous active request.

takeLatest takes two parameters, the first is an action type string that triggers the function that we put in the second parameter.

There are much more helpful Saga effects - There is takeEvery which allows multiple requests to be fired concurrently, so you can start a new instance without terminating the previous active request.

throttle is also very useful to prevent too many API requests.

For more info about Saga effects check the official docs

Copy the code down below and update the saga file

import { call, put, takeEvery } from "redux-saga/effects";
import { GET_USERS_FETCH, GET_USERS_SUCCESS } from "../actions/action";

function* getUsersRequest() {
    const users = yield call(() => fetch('https://jsonplaceholder.typicode.com/users'));
    const formattedUsers = yield users.json(); 
    yield put({ type: GET_USERS_SUCCESS, formattedUsers });
}

function* getUsersSaga() {
    yield takeEvery(GET_USERS_FETCH, getUsersRequest);
}

export default getUsersSaga;

Here we add the function that contains the actual logic for the API call.
put obviously puts the data we got from the API response and updates the store with it.

Now let's wire things up and update the store with the code below

import { createStore, combineReducers, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import users from '../reducers/reducer';

export default function configureStore() {
    const sagaMiddleware = createSagaMiddleware();
    const reducers = combineReducers({ users });

    return {
        ...createStore(reducers, applyMiddleware(sagaMiddleware)),
        runSaga: sagaMiddleware.run,
    }
}

Above we simply create a saga middleware instance and return the run function that we are gonna pass the saga we just created into.

Now we update the index file

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import configureStore from './store/configureStore';
import getUsersSaga from './sagas/saga';

const store = configureStore();
store.runSaga(getUsersSaga);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Finally, let's update our JSX - copy the code below into App.js and run the app.

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getUsersFetch } from './actions/action';


function App(){
  const dispatch = useDispatch();
  const users = useSelector(state => state.users.users);
  useEffect(() => {
    dispatch(getUsersFetch())
  }, [dispatch])
  return (
    <div className="App">
      {users.map(user => (<h2 key={Math.random()}>{user.name}</h2>))}
    </div>
  );
}
export default App;

Now let's build the same saga functionality with RTK

We will first need to install the toolkit dependency

npm install @reduxjs/toolkit --save

Step 1 - Create usersSlice

RTK introduces slice which essentially replaces reducers and actions with a single feature that auto generates action types and action creators,

Let's create a new folder in the root directory and name it features.
Inside of it create usersSlice.js and copy the code below into it.
We initialized a slice using createSlice which is a function that takes an object of slice name, initialState and reducer functions, then export the actions that redux generated for us and the reducer function that manages our state.

import { createSlice } from "@reduxjs/toolkit";

const usersSlice = createSlice({
  name: "users",
  initialState: {
    users: []
  },
  reducers: {
    getUsersSuccess: (state, action) => {
      state.users = action.payload;
    },
  }
});

export const { getUsersSuccess } = usersSlice.actions;

export default usersSlice.reducer;

Notice how we seem to be "mutating" the state object, but indeed RTK takes care of immutability behind the scene using Immer.

Step 2 - Update Saga

Now let's update our saga

import { call, put, takeEvery } from "redux-saga/effects";
import { getUsersSuccess } from "../features/userSlice";

function* getUsersRequest() {
    const users = yield call(() => fetch('https://jsonplaceholder.typicode.com/users'));
    const formattedUsers = yield users.json(); 
    yield put(getUsersSuccess(formattedUsers)) 
}

export function* getUsersSaga(action) {
    yield takeEvery('users/getUsersFetch', getUsersRequest)
}

Notice in the getUsersSaga function how we are using the action type which is generated based on the slice name.

Step 3 - Update configureStore

Now we make a slight change in the configureStore file and we are good to go!

import {
    configureStore,
} from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import usersReducer from "../features/userSlice";


export default function configureStoreFunction() {
    const sagaMiddleware = createSagaMiddleware();

    return {
        ...configureStore({
            reducer: {
                users: usersReducer
            },
            middleware: [sagaMiddleware]
        }),
        runSaga: sagaMiddleware.run,
    }
}

Here we use the RTK configureStore instead of the deprecated createStore that we used in plain Redux

configureStore takes an object of reducer and middleware - reducer is an object of the generated reducers , and we add the saga instance into the middleware array.

Another slight change in the imports of App.js

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUsersFetch } from "./features/userSlice";

function App() {
  const dispatch = useDispatch();
  const users = useSelector((state) => state.users.users);
  useEffect(() => {
    dispatch(getUsersFetch())
  }, [dispatch])
  return (
    <div className="App">
      {users.map(user => (<h2 key={Math.random()}>{user.name}</h2>))}
    </div>
  );
}
export default App;

Now it's time to explore RTK Query

RTK Query

We don't need to install any additional packages to use RTK Query.

Step 1 - createApi

Let's start by updating the usersSlice.js with the code below

import { createApi } from '@reduxjs/toolkit/query/react'

export const apiSlice = createApi({
    reducerPath: 'UsersAPI'
})

Here we are defining usersApi using createApi which is basically the core of RTK Query's functionality, then we pass an object and set the reducerPath to UsersAPI to identify it.

After that, we're going to set baseQuery, which will essentially be our client with the API base URL.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const apiSlice = createApi({
    reducerPath: 'UsersAPI',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
})

We then assign endpoints which will contain the logic that specifies the actual paths we are getting (or modifying) the fetch data from, and then start defining the fields using builder that we get from the arguments of endpoints.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const apiSlice = createApi({
    reducerPath: 'UsersAPI',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: () => 'users',
        }),
    })
})

Now we set the basic query param that we are hitting, which would be users.

Here we used the query method because we are just getting data from the endpoint. If we are updating it, we would use mutation.

That will auto-generate a hook based on the endpoint's name, so that would be useGetUsersQuery, and then we are exporting it for later use.

Full code:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const apiSlice = createApi({
    reducerPath: 'UsersAPI',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: () => 'users',
        }),
    })
})

export const {
    useGetUsersQuery
} = apiSlice

Step 2 - ApiProvider

Redux requires us to wrap our app with a Provider to which we pass our store.

When we use RTK Query for API access, we need to specify ApiProvider and pass the apiSlice into it.

Let's update index.js with the code below

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import App from './App';
import { apiSlice } from "./features/userSlice";

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <ApiProvider api={apiSlice}>
      <App />
    </ApiProvider>
  </React.StrictMode>
);

Let's now make use of what we have integrated

Update App.js with the following code:

import { useGetTodosQuery } from "./features/userSlice";

function App() {
  const {
    data: users,
    isLoading,
    isSuccess,
  } = useGetTodosQuery()  

  return (
    <div className="App">
      {isLoading && <span>Loading...</span>}
      {isSuccess && users.map(user => (<h2 key={Math.random()}>{user.name}</h2>))}
    </div>
  );
}
export default App;

RTK query provides us with some cool stuff that we usually track and write its logic ourselves.

It encapsulates the entire data fetching process, so you can catch errors and trace the request status if it's still pending or fulfilled using isLoading without any handwritten boilerplate code that we usually do.

Let's now run the app and that's a wrap!

Full code can be found in the github repo here.

Conclusion:

As we can see, Redux Saga is a powerful tool with many cool effects built in, which saves you a lot of boilerplate code if you want to achieve what those effects offer.
However, with RTK Query, you can just kick off with a few lines of code without installing any additional dependencies. It's also the recommended approach by the Redux team for API interactions.
Finally, you should carefully pick which one will fit better for your project, as it could be a pain in the ass if you decide to change it later.