DEV Community: Quoc Huynh Website

Get Pending Transactions in Binance Smart Chain Mempool Using Ether.js and QuickNode

Quoc Huynh Website — Wed, 18 Dec 2024 10:41:38 +0000

After a transaction is approved or validated, it moves from the mempool to the blockchain, every transaction goes into a waiting area called the "mempool" before it is confirmed. Watching the mempool helps you see these transactions before they are added to the blockchain. In this guide, I’ll show you how to use Ether.js and QuickNode to get pending transactions from the mempool.

What You Need

QuickNode Binance Smart Chain endpoint.
Installed ethers.js

How to Get Pending Transactions

Step 1: Install library

Install the required packages:

npm install ethers dotenv

Create a .env file and add your QuickNode WebSocket URL:

QUICKNODE_URL=wss://your-quicknode-endpoint

Step 2: Write code

Create a file named app.js and write this code:

require('dotenv').config();
const { ethers } = require('ethers');

(async () => {
  try {
    // Connect to QuickNode WebSocket
    const provider = new ethers.providers.WebSocketProvider(process.env.QUICKNODE_URL);

    provider.on('pending', async (txHash) => {
      try {
        const tx = await provider.getTransaction(txHash);


        if (tx) {
          console.log(`Hash Transaction: ${txHash}`);
          console.log(`From: ${tx.from}`);
          console.log(`To: ${tx.to}`);
          console.log(`Amount : ${ethers.formatEther(tx.value)} BNB`);
          console.log('-----------------------------');
        }
      } catch (err) {
        console.error(`Error ${txHash}:`, err);
      }
    });
  } catch (err) {
    console.error('Error connecting to QuickNode:', err);
  }
})();

Step 3: Run code

If everything works, you’ll see pending transactions logged in your terminal.

Pending Transaction: 0xabc123...
From: 0x1234abcd...
To: 0x9876efgh...
Amount: 0.5 BNB
-----------------------------
Pending Transaction: 0xdef456...
From: 0xabcd5678...
To: 0xefgh1234...
Amount: 2.0 BNB
-----------------------------

Conclusion

Using Ether.js and QuickNode, you can easily watch Ethereum’s mempool for pending transactions. This is useful for analysis, building bots, or learning more about Ethereum. Try it out and see what you can do!

Contact

Text me when you need to build a bockchain bot
Email: quochbcontact@gmail.com

Containerize ASP.NET Core API, Entity Framework with SQL Server, Let's Encrypt, Docker, and Nginx (Part 1)

Quoc Huynh Website — Thu, 21 Nov 2024 11:07:33 +0000

To be honest, finding a comprehensive solution online for setting up Docker, ASP.NET Core, SQL Server, Let's Encrypt, and Nginx all together is like searching for a needle in a haystack. After hours of Googling and plenty of frustration, I decided to write down everything I learned and make life easier for everyone. Ready to get started?

How it works?

The idea is to containerize ASP.NET Core, SQL Server, Let's Encrypt, and Nginx using Docker and deploy it to an Ubuntu VPS. You can still manage the database via Azure Data Studio or SQL Server Management Studio. HTTPS will be enabled for free using Let's Encrypt, with a 3-month certificate renewal.

In this article, I'll guide you through containerizing an ASP.NET Core API with SQL Server. We'll start by setting up Entity Framework Core with Code First, then move on to configuring the containers, and add Nginx and SSL later.

Step 1: Dockerfile for ASP.NET

First, create a Dockerfile for ASP.NET. It’s simple to do in Microsoft Visual Studio. Even if you have multiple projects in your solution, just right-click on the main project, select Add > Docker Support, you can follow this article.

Step 2: Set Up Docker-Compose
Now that you’ve created the Dockerfile for your ASP.NET Core, the next step is to set up docker-compose to connect your application with the SQL Server database inside the container.

version: '3.4'

services:
  sqldb:
    image: mcr.microsoft.com/mssql/server:2019-latest
    environment:
      - SA_PASSWORD=your-password
      - ACCEPT_EULA=Y
    ports:
      - "8002:1433"
    restart: always
    volumes:
      #- sql_data:/var/opt/mssql 
    networks:
      - quochuynhwebsite-network

  quochuynhwebsite:
    image: ${DOCKER_REGISTRY-}quochuynhwebsite
    build:
      context: .
      dockerfile: QuocHuynhWebsite/Dockerfile
    ports:
      - "8003:80"
    expose:
      - "5000"
    environment:
      - ASPNETCORE_URLS=http://+:5000
    networks:
      - quochuynhwebsite-network
    restart: always

networks:
  quochuynhwebsite-network:
    driver: bridge

Important notes: Make sure your database is running before starting your application. Avoid using volumes on your local machine, as they may conflict with your local database. Also, don't forget to configure the network to ensure proper communication between the containers.

Step 3: Update Connection String in appsettings.json

After setting docker-compose file, update the connection string in appsettings.json to match the database configuration inside Docker. Since the database is running in a Docker container, you’ll use the service name (sqldb) as the Server value in your connection string.

Server: sqldb
UserId: sa

"ConnectionStrings": {
    "sqlConnection": "Server=sqldb;Database=DbName;User Id=sa;Password=yourpassword;TrustServerCertificate=True;"
},

Step 4: Setting up Entity Framework Core with Code First

If you think everything will run perfectly, you might be mistaken. The issue arises when you use Entity Framework to create the database from your classes via command line commands like add-migration and update-database. These commands are typically run using the .NET CLI, which means you'll need to create an additional image in your docker-compose setup. Is it necessary? No, you can use Entity Framework's built-in functionality to automatically create the database and tables on the first request, saving you the extra step of managing migrations manually.

Automating Database Creation with Entity Framework in ASP.NET Core

When deploying an ASP.NET Core application with Entity Framework, ensuring your database is created and tables are ready on the first run can save a lot of time and hassle. While migrations and CLI commands are often used, you can automate this process directly in your DbContext constructor.

public RepositoryContext(DbContextOptions options) : base(options)
{
    try
    {
        var databaseCreator = Database.GetService<IDatabaseCreator>() as RelationalDatabaseCreator;
        if (databaseCreator != null)
        {
            // Create the database if it doesn't exist
            if (!databaseCreator.CanConnect())
            {
                databaseCreator.Create();
            }

            // Create tables if they don't exist
            if (!databaseCreator.HasTables())
            {
                databaseCreator.CreateTables();
            }
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Database creation failed: {ex.Message}");
    }
}

Now, let's access our ASP.NET Core Application:

docker-compose up --build 

// url: http://localhost:8003

But, how I can access my database? Oke Let me teach you:
Server name: localhost,8002
Authentication: SQL Server Authantication
Login: sa
Password: your password

Conclusion

Congratulations! You’ve successfully set up your ASP.NET Core application with SQL Server in Docker. By following these steps, you've containerized your app, configured Entity Framework for automated database creation, and established connectivity between your API and the SQL Server database.
But we’re not stopping here. To make your application production-ready, it’s crucial to implement secure HTTPS access. This is where Nginx and Let’s Encrypt SSL come into play.

Let's connect

Email: quochuynhdbcontact@gmail.com
Website: https://www.quochuynh.website

Notion to Document Page with React JS in 3 minutes

Quoc Huynh Website — Sun, 30 Jun 2024 21:02:58 +0000

The "Document Page" is commonly used on many websites today for various purposes such as tutorials, news, policies, and more. The challenge in coding document pages is that front-end developers often have to handle a large amount of simple text and repetitive code. Additionally, these documents come in a wide variety of formats. On some simple websites, when a document needs to be updated, the front-end developer has to modify the code manually, which is not efficient.

We can solve the problem by using Notion. Notion is an all-in-one workspace tool which supports text documents. The simple idea is to fetch content from a public Notion page and display it on our React page. When a document needs to be updated, we can make the changes in Notion, and our React Page will automatically sync with the public Notion page.

For example, we have an exchange policy page in Vietnamese stored on Notion.

1. Switch the page to public and extract its ID on URL.

Switch to public:

Extract ID from URL: the ID is located at the end of the URL

https://juun-cheerful.notion.site/Ch-nh-s-ch-ho-n-tr-ti-n-dbc3de7dc52248c4b293ac9114238d35
=> ID: dbc3de7dc52248c4b293ac9114238d35
https://juun-cheerful.notion.site/H-ng-d-n-mua-h-ng-Beanhop-df2d076768b64bc0aab8f037eca27307
=> ID: df2d076768b64bc0aab8f037eca27307

2. Install essential react libraries:

yarn dev axios
yarn dev react-notion

react-notion is used to render content from Notion Json format rule.
axios is used to fetch data from URLs.

Splitbee: It is not a react library, it takes the ID of the Notion page as a URL path and responds with the data in the Notion JSON format rule.

Take the ID of the notion page as an URL Path:

//https://notion-api.splitbee.io/v1/page/ + ID 
//https://notion-api.splitbee.io/v1/page/dbc3de7dc52248c4b293ac9114238d35

Response the data in Notion Json format rule:

3. Coding

The basic concept is that we will fetch data from Splitbee and ID of noion page combination and display the content via react-notion:

Note: We have to import all the needed resource to use react-notion and use NotionRenderer component to render received data. Please read more in react-notion document

import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; // only needed for code highlighting
import { NotionRenderer } from "react-notion";

4. Result and Live Demo

Website demo: https://www.beanhop.vn/chinh-sach-hoan-tien-beanhop
Origin notion: https://calico-harmonica-575.notion.site/Ch-nh-s-ch-ho-n-tr-ti-n-dbc3de7dc52248c4b293ac9114238d35

Finally, I hope it will be helpful to you. If you have some questions, just comment below.

Build a multi-language website using React in 3 minutes

Quoc Huynh Website — Sun, 23 Oct 2022 18:45:52 +0000

If you are finding a way to build a website that uses multiple languages. This place is for you.

The hero of this solution is React-I18next. It's a react library that is used for translating languages. You can install the library by the command line below:

npm install i18next react-i18next@latest

To start off, we need to configure the library:

1. Create an initiation i8next file. I will name it `i18n.js`:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    // language resources
    resources: {
      en: {
        translation: {
         welcome: "Welcome to React"
        }
      },
      vn: {
        translation: {
         welcome: "Chào mừng đến với bình nguyên vô tận"
        }
      },
    }
  });

export default i18n;

Next, import the file into index.js

//pla pla
import './i18n'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Let's notice the resource property where you can push more corresponding language. In a real-world project, this resource can come from a database (we will discuss in another article) but to keep the demonstration simply, I would like to translate English into Vietnamese and use an object directly. The default language is English.

2. Play with the library.

The idea is that the user will click on the button to translate languages on the website. Let's open App.js

To display and switch between two languages, the library provides useTranslation(). It's a react-18next built-in that exposes some functions as below:

import { useTranslation } from 'react-i18next';

export default function App() {

  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
    </div>
  );
}
export default App;

We use t to get content by the key object in the resource object where we have configured it. The default language is English so it displays Welcome to React.

import { useTranslation } from "react-i18next";

const lngs = [
  { code: "en", native: "English" },
  { code: "vn", native: "Vietnamese" },
];

export default function App() {
  const { t, i18n } = useTranslation();

  const handleTrans = (code) => {
    i18n.changeLanguage(code);
  };

  return (
    <div style={{padding: '50px'}}>
      <h1>{t("welcome")}</h1>

      {lngs.map((lng, i) => {
        const { code, native } = lng;
        return <button onClick={() => handleTrans(code)}>{native}</button>;
      })}

    </div>
  );
}

Next, the i8next instance contains changeLanguage function which is used for changing language by country code. It takes a parameter as a country code (en and vn).

3. Result

Finally, I hope it will be helpful to you. If you want me to use it with the database, just comment below. Really recommend you visit their document to learn the way to scale a huge project.

Build a blog for beginners with React in 3 minutes

Quoc Huynh Website — Thu, 18 Nov 2021 12:28:15 +0000

Strapi will be used in this project. It saves our data in a JSON file and return data with JSON throught API. Strapi is a popular open-source used by a lot of developers in 2021. You don't know how to use? Don't anxious, just follow me.
Link : https://strapi.io/

1. Set up Strapi

Open termial and paste it:

npx create-strapi-starter@latest my-strapi-gatsby gatsby-blog

But but, remember to enter "Quickstart (recommended)" after that 😲

To download, it takes about 1 minute to download. So, you can watch some pornhubs 😂.

2. Look through the blog

There are two tabs will be opened by the broswer after downloaded. The first tab for back-end where create some posts and the second tab for front-end where display your posts.

And Strapi creates some files that consists of two folders like back-end and front-end on Visual Studio Code:

3. Admin's Database on Strapi

After register, we go to Articles and click on Add new Articles to write our post. Remarkable of the post is Category and Author's name on the right of the page.

You can add some photos and the slug will be created by Strapi at the bottom of page.

Go to http://localhost:8000/articles and check on API

Click on Publish.

4. Read our post

Remember to type npm start on front-end folder, you will see your posts there.

5. Deploy

You can deploy our project on any service. I recommend to deploy on Heroku

Thanks for reading this post! Follow me to know more about React's tutorial

DEV Community: Quoc Huynh Website

Get Pending Transactions in Binance Smart Chain Mempool Using Ether.js and QuickNode

What You Need

How to Get Pending Transactions

Step 1: Install library

Step 2: Write code

Step 3: Run code

Conclusion

Contact

Containerize ASP.NET Core API, Entity Framework with SQL Server, Let's Encrypt, Docker, and Nginx (Part 1)

How it works?

Step 1: Dockerfile for ASP.NET

Step 3: Update Connection String in appsettings.json

Step 4: Setting up Entity Framework Core with Code First

Automating Database Creation with Entity Framework in ASP.NET Core

Conclusion

Let's connect

Notion to Document Page with React JS in 3 minutes

Build a multi-language website using React in 3 minutes

1. Create an initiation i8next file. I will name it i18n.js:

2. Play with the library.

3. Result

Build a blog for beginners with React in 3 minutes

1. Set up Strapi

2. Look through the blog

3. Admin's Database on Strapi

4. Read our post

5. Deploy

1. Create an initiation i8next file. I will name it `i18n.js`: