DEV Community: Joshua Evuetapha

Ethonline 2023, my experience, challenge, and Lessons Learnt

Joshua Evuetapha — Wed, 08 Nov 2023 06:36:09 +0000

So a few weeks ago, I saw that eth-online was about to start, so I hopped on, I wanted to learn more about ZKEVM and win some cool cash prizes this year I have been part of a few hackathons and I made second runner-up in both Hyperlane Hyperhack and Flow future hackathon, where I want about 400 USD and 6000 USD respectively.
So I came supercharged for Eth-online, what am I to build a rock, paper, scissors game on polygon zkevm.

Really? A rock, paper, scissors game onchain?

Well, I wanted to build a very simple decentralized game in a way no one else has ever done.
My plans were much I wanted to leverage a lot on polygon services, so why polygon zkevm? Since zkevm is way cheaper than Mainnet and transactions are faster on the ZKEVM, I saw it as an ideal place to build on-chain games, and the rock, paper, scissors game was simple enough.
Here is how the game would work, users would earn RPS point tokens for every real person they win on-chain, you get 10 RPS point Tokens, but losing to someone with lower RPS tokens will cause you to lose some RPS tokens depending on the gap you have with that person, this also gives the winner extra RPS tokens including the 10 RPS tokens, this RPS token is a simple ERC20 tokens, but it determines who seat on top of the leaderboard, this is where The Graph protocol comes in.

I wanted the game to be multichain so users could transfer polygon proofs from one chain to another for this, I intended to use the wormhole protocol to communicate between polygon zkevm and scroll zkevm.

Why wormhole?

Well they were offering some cool cash prizes, I have worked with blockchain interoperability before using Hyperlane so the concept wasn't new to me.

What other chain do I want to deploy the project on?

Scroll zkevm, I learnt about Scroll from the event and they had a lot of cool cash prizes, 20k USDC in total, just deploy on their zkevm no edit needed, definitely winning a prize on Scroll was way easier than Polygon, because they were new and they had more prize category.

What other polygon service did I plan to use?

I wanted to build with polygon ID, Remember I said users are rewarded with RPS tokens when they win a fight with a real human being? This was what polygon ID would be used for, Every user verifies themselves and their wallet, this verification would be in such a way that the user won't be able to use another address to challenge themselves.
This is so important in order to prevent users from getting unfair advantages and also protect our achievement NFTs from fake fights, polygon ID would also verify age to make sure people below 18 can't stake assets.
Talking about achievement NFTs, players earn NFTs for every milestone of unique victories they reach, from the first NFTs that require just one unique victory, to the one that requires 390625 unique victories to win, that is you have to defeat that many people. Easy right? 😄

How the Game would work

So basically the game is a two-player two-round game, like Mortal Kombat, but with rock, paper, and scissors, players battle for RPS point tokens, they can also choose to stake NFTs, ERC20 tokens, and ether, stakes don't have to be equal. With every milestone of unique persons you defeat, you get rare achievement NFTs, (You get your first NFT Battle Ready, when you defeat your first opponent and RPS King NFT when you defeat your 390625th opponent).
RPS point token reward system, winning a match gives you 10 RPS point tokens, Players with more RPST, lose RPST when they lose to people with less RPST, RPST determines who sits on top of the leaderboard.

For example
A has 1000 RPST, B has 10 RPST, and A loses the battles so B gets (1000 - 10) / 100 RPS tokens as a reward for winning someone on top and A loses (1000 - 10) / 50 RPST tokens for losing to someone below

So the easiest way to earn RPST is to fight people on top of the leaderboard, this will incentivize the underdogs to stake more valuable items in and the people on top of the leaderboards could get more value per game on the risk of losing points.

Challenges faced

My first challenge had to do with my personal life for the first week of the hackathon, I got extremely busy with work so I could only dedicate a little time to the Hackathon project, the next week I was free, only to come to the realization that Eth-online isn't really 3 weeks, it's for like 16days the whole event plus judging is for 21days? That was tough considering the fact that I intended to integrate a lot of features, Nevertheless, I pressed on.

So I checked Wormhole and they didn't support neither polygon zkevm, nor Scroll, I ain't going down without a fight so I checked Hyperlane, and they don't support zkevm either 😞 so I had to drop this feature, it seemed like the best thing to do.

So I went all in on Polygon ID, researching online and studying the documentation, I even downloaded the app from Play Store, but I couldn't really use it with my App the information around it was a bit confusing, maybe because I was under pressure, I couldn't find the right guide to simplify the whole thing for me within a short time period, let alone creating anti-spam proof, the whole information I got make it seemed that it will be difficult to create Anti-spam proof with Polygon ID, I will be glad to be wrong about this, so I dropped this feature to focus on the main game and the Graph Protocol.

About three days before the submission deadline I was finally ready to deploy my smart contract on polygon zkevm, I had tested on the Hardhat local node and everything was fine, so what could go wrong?

Everything went wrong for starters, I couldn't deploy the contract on zkevm, and I was getting some weird errors, stressed about what could be the error? debugging for almost a day, then I found the bug. I was deploying multiple contracts on the constructor, so basically my constructors were contract factories, to fix this I had to deploy the contracts separately and pass the contract address as arguments to the constructors, I don't know why it behaved like this, it worked fine on my local hardhat network and Polygon Mumbai, so I guessed the zkevm is not 100% compatible with the EVM.

After fixing this bug I faced another challenge with my nextjs app, I could write to the blockchain on polygon zkevm, but I couldn't read from it, the same thing with scroll zkvm after, spending hours on this with no results, I found the error, this was it, I was using wagmi to interact with the blockchain, but my error was that I didn't specify the chainId on my read requests hooks, so by default, I was reading the data from a different blockchain network, where the smart contract doesn't exist.
Here is a similar issue on StackOverflow, I provided my solution to this question https://stackoverflow.com/questions/76763812/wagmi-throws-error-contractfunctionexecutionerror-the-contract-function-owner/77280917#77280917

Time to deploy on a live server 😀 .

I always host my React and Nextjs projects on Netlify so this wasn't any different, deployed to Netlify, and I wanted to play the game, but 💣 I was facing some weird issues.
The app worked fine but anytime I tried to visit certain pages directly using the address bar I got the weird Nextjs, at first I thought it was caused by the Hydration error, I ignored that page but it didn't work even after fixing it so, I went online.

The error message is shown above, so I came across this forum, and it was helpful, https://answers.netlify.com/t/runtime-importmoduleerror-error-cannot-find-module-styled-jsx-nextjs-nextauth/95281
he fixed the issue by downgrading @netlify/plugin-nextjs, but this didn't solve my problem, so I had to downgrade my Nextjs version from 13.5.4 to 13.4.6, which fixed the error for me.

I fixed the Nextjs issue on the last day of the Hackathon, feeling happy and fulfilled about the many challenges I fixed in 3 days I was wondering what could stop me, my game was running smoothly on polygon zkevm, and I finally won 😁 .
Have I? Not quite everything was working fine on polygon zkevm, but not on scroll zkevm, the contract read hook wasn't polling data from the scroll blockchain, and I had to refresh the page to poll data 😠 after some back and forth I checked my network console and found out the scroll websockets public rpc URL has been moved? to where I don't know, well I solved this by creating a scroll endpoint on Quick-node and using custom providers instead of public providers from Wagmi.

Lessons learned

Have a better understanding of the protocols you plan on using for a hackathon beforehand.
Ethonline isn't a 3 weeks hackathon so don't plan with 3 weeks in mind.
Get your demo video quickly and on time, when I made my demo video my app wasn't working on any of the zkevm, so I demoed the app on the hardhat local network, while I continued battling my bugs.
Don't be quick to use the latest version of any software, unknown bugs might be waiting for you (my Netlify and Nextjs issue).
Test the app on the intended blockchain from time to time, the local blockchain might not be enough.
Never rely on public providers, use RPCs they are more reliable, use Quick-node they offer support for a lot of Blockchain and you can get started for free.

Conclusion

While my Ethonline Hackathon didn't go as planned, I couldn't build what I planned to build, but I did manage to build a working product, you can check it out https://ethglobal.com/showcase/rps-onchain-bp55v and as a consolation, my project won the pool prize on Scroll which was about 17.17 USDC, more importantly, I had fun and learned new things, I used the graph protocol for the first time and I enjoyed it, one product that fascinates me about this hackathon was polygon ID and I planned to use this product on my next Hackathon Chainlink Constellation. I will surely share my experience here and hopefully, I get better results, A la prochaine.

Smart Contract Upgrade

Joshua Evuetapha — Sat, 18 Mar 2023 08:54:03 +0000

Smart contracts are self-executing programs that run on the Ethereum Virtual Machine (EVM). These programs are immutable by design, which means no update to the business logic after deployment. While this is good for user trust, decentralization, and security of smart contracts, it may be a drawback as vulnerabilities in smart contracts cannot be fixed after deployment.

Smart Contracts are upgraded for various reasons, which include:

Fixing Bugs
Fixing Security issues
Adding new features to the Smart Contract

What is a Smart contract upgrade?

A smart contract upgrade is a process of updating the business logic of an already deployed smart contract while preserving the states (data) of the smart contract.
There are different ways of upgrading smart contracts, and we will talk about a few of them in this article.

Contract Migration
Data separation
Proxy Pattern
Diamond Pattern (EIP-2535)

Contract Migration

This is one of the oldest and crudest way of upgrading smart contracts, it is very tedious and expensive in terms of gas fees and may be impractical in large applications. It is implemented by deploying a new smart contract with the updated business logic, and then copying the states from the old smart contract to the new one, then changing the smart contract address to the new one in your DApp.
This method is used when the smart contract was developed without the intention to upgrade it.

Data separation

This method uses two smart contracts; one smart contract contains the business logic, and the other smart contract contains the contract's data, users interact directly with the logic contract, and the logic contract calls the data contract as the name implies all state variables are stored here.

Upgrades are done by changing ownership of the data contract to that of the new business logic contract and using the address of the new business contract in your DApp. This method is better than Contract Migration as it is cheaper, but you have to change the contract address with each upgrade you make which is not ideal as other software may depend on your Smart contract.

Proxy Pattern

This method makes use of an immutable proxy contract that stores the data and an upgradable logic contract, the user interacts directly with the immutable proxy contract, and this contract delegate calls the logic contract.

To upgrade in this pattern, you need to deploy a new logic contract, then update the address on the proxy contract to that of the new one, subsequent calls to the proxy contract will be implemented by the new logic contract.

Diamond Pattern (EIP-2535)

This method is an extension of the Proxy Pattern. This pattern uses a contract called the Diamond. The Diamond contract delegate call multiple logic contracts called facets. These facets execute the logic, and the diamond contract stores the state (data). The most important feature of the Diamond pattern is that it is not constrained by the 24kb maximum contract size in solidity, as larger contracts can be splited into smaller facets, also with this pattern you don't need to update the whole contract during upgrades, you only need to deal with the facet that contains that function or add a new facet.

In the Diamond pattern, upgrades are handled by a facet called the DiamondCutFacet with this facet, you can add, remove or replace functionalities. If this facet is removed the contract can't be upgraded anymore.

Conclusion

In this article we have talked about four popular methods of upgrading smart contracts, the Contract Migration pattern should only be used when you deployed the contract without intention of upgrading it, it is not advisable to use Separation of Logic method as it brings the inconvience of changing the contract address with each deployment the Proxy Pattern is currently the most used pattern so more people in the EVM community understands it, but the Diamond pattern is a game changer, it makes it possible for developers to exceed the 24kb size limit of smart contracts, so you smart contract can grow to any size.

How to Accept Crypto Payments in a Next.js Application using Coinbase Commerce

Joshua Evuetapha — Tue, 20 Sep 2022 09:59:43 +0000

The adaptation of cryptocurrencies is increasing fast these digital assets can be used to settle debts, and several businesses now accept cryptocurrencies as a means of payment. The most significant advantage of cryptocurrencies is that they are decentralized, making payments easy as people can instantly transfer digital assets anywhere in the world without restrictions.

Given that cryptocurrencies are gaining popularity, you may want to accept cryptocurrencies in your web application, one way to do that is by using coinbase commerce. Coinbase commerce is a platform that allows merchants to accept digital payments through cryptocurrencies, and they support many cryptocurrencies, you can look at their list of supported cryptocurrencies here.

Next.js is a popular Frontend framework built on React.js, it supports serverless functions this will be very vital in this article, these serverless functions allow us to write backend codes which essentially eliminate the need to have two separate codebases for the frontend and backend.

Prerequisite

You need the following to successfully follow this article.

Project Set up

First, let’s create a new Next.js application by running the command below on the terminal, Follow the instructions.



npx create-next-app@latest

Next, navigate to the project directory and install the following dependencies by running the command below.



npm install coinbase-commerce-node axios

axios is an HTTP client and coinbase-commerce-node is the coin base SDK for Nodejs.

Once these packages have been installed, open the project directory with your text editor, and run the following command in your terminal to start the app in development mode.



npm run dev

The application will be served at [localhost:3000](http://localhost:3000) if port 3000 is free, else another port will be chosen.

Building the Application

In this article, we will be building a simple web-based e-commerce shop that accepts cryptocurrencies using Next.js, we will use coinbase commerce to create payment links, and we will create a webhook URL to verify transactions, and test this webhook locally using a tool called Ngrok, the data source for the application will be a hard-coded array of shop items, now open the project directory in your text editor, and let’s write some codes.

You can get the source code of this project here, feel free to clone the repo.

The data source

In a real-world application, the data would likely come from a database or a server, but in this article, it will be hard-coded. At the root directory of your project create a file name data.js this is where all the application data will come from, copy and paste the code snippet below in that file.



export const products = [
    {
        id: 1,
        name: "Small Black Chair",
        price: 10,
        currency: "USD",
        description: "Soft Chair, Best value for Money"
    },
    {
        id: 2,
        name: "Spoon",
        price: 2,
        currency: "USDT",
        description: "Spoon gets the best value for Money"
    },
    {
        id: 3,
        name: "Small Table",
        price: 10,
        currency: "USDC",
        description: "Soft Table, Best value for Money"
    },
    {
        id: 4,
        name: "Silver",
        price: 0.2,
        currency: "ETH",
        description: "Silver spoon set"
    },
    {
        id: 5,
        name: "Silver Cup",
        price: 0.03,
        currency: "BTC",
        description: "Cup for the big men"
    },
    {
        id: 6,
        name: "Basic Cup",
        price: 2000,
        currency: "DOGE",
        description: "Best value for Money"
    }
]

Building the Home Page

Next.js uses file-based routing so any react component exported as default in the pages directory will be rendered as the page when that route is visited, you can learn more about it here.

Navigate to pages/index.js delete the boilerplate code and input the following code snippets, we will discourse the code next.



import { useState } from 'react';
import axios from 'axios';
import { products } from '../data';

export default function Home() {
  return (
    <div className={"container"}>
      {
        products.map( (product, index) => {
          return (<Products key={index} product={product} />)
        })
      }
    </div>
  )
}

const Products = ({product}) => {
  const [loading, setLoading] =  useState(false);

  const coinbase = async () => {
    setLoading(true)
    try {
      const data = await axios.post('/api/init', { id: product.id })
      setLoading(false)
      window.open(data.data.hosted_url, '_blank');
    } catch (e) {
      console.error(e)
      setLoading(false)
    }
  }

  return (
    <div>
      <h4>{product.name}</h4>
      <p>{product.description}</p>
      <p>Price: {product.price} {product.currency}</p>
      <button onClick={coinbase} disabled={loading}> Pay With Crtpto </button>
    </div>
  )
}

The code snippet above contains two components, Home and Products, the Home component is exported as the default component, while the Product component is not exported this is because we are only using it in this file to display each product.

The code snippet below in the Home component maps the products array to the Product component.



products.map( (product, index) => {
  return (<Products key={index} product={product} />)
})

Let’s go into the Product component, this component displays a particular product, and it contains a very important function, the coinbase function, this function sends a post request to this route /api/init, we will set up this route later if this request is successful this route will create a payment charge using the product id and returns the charge details, then the code will open a new tab on the browser using the payment link returned from coinbase commerce.

Let’s take a look at the coinbase function below;



  const coinbase = async () => {
    setLoading(true)
    try {
      const data = await axios.post('/api/init', { id: product.id })
      setLoading(false)
      window.open(data.data.hosted_url, '_blank');
    } catch (e) {
      console.error(e)
      setLoading(false)
    }
  }

This piece of code const data = await axios.post('/api/init', { id: product.id }) send a post request to our api routes passing the product ID as the body of the request, and this line of code window.open(data.data.hosted_url, '_blank'); opens another tab in the browser, using the link returned from our post request, next we are going to set up the init route.

Styling the Application

Now let’s add some styling to give the application a better look, we are going to be using global CSS for this one, global CSS now open the styles/global.css file, delete the boilerplate CSS and paste the CSS code snippet below, you can learn more about global CSS in Next.js from here.



body {
  background-color: whitesmoke;
}

.container {
  padding: 0 2rem;
  display: flex;
  justify-content: space-evenly;
  height: 100vh;
  flex-wrap: wrap;
}

.container > div {
  display: block;
  margin: 0.8em;
  padding: 4em;
  border: 2px solid black;
  flex-grow: 1;
}

Building the payment route handler

Next.js allows us to create serverless functions so that we can create backend API route handlers. You can learn more about them here. Next, create a file pages/api/init.js and paste the following code snippets. we will discourse the code next.



import { Client, resources } from 'coinbase-commerce-node';
import { products } from '../../data';

Client.init(String(process.env.COINBASE_API));
const { Charge } = resources;

const coinInitRoute = async(req, res) => {

  const { id } = req.body

  const product = products.find(product => product.id === id)

  try {

    const chargeData = {
      name: product.name,
      description: product.description,
      pricing_type: "fixed_price",
      local_price: {
        amount: product.price,
        currency: product.currency,
      },
      metadata: {
        id: product.id,
        userID: 1
      },
    };

    const charge = await Charge.create(chargeData);

    res.send(charge);

  } catch (e) {
    res.status(500).send({ error:e });
  }

}

export default coinInitRoute

We start by importing the modules needed to create a charge, we will be using Client and resources from the coinbase-commerce-node package, next we import our product data,

this line of code Client.init(process.env.COINBASE_API) initiates the coinbase commerce client using our coinbase commerce API key we will talk about how to get this later.



import { Client, resources } from 'coinbase-commerce-node';
import { products } from '../../data';

Client.init(process.env.COINBASE_API);
const { Charge } = resources;

The flow of this route handler is simple, we retrieve the product id from the req.body and use it to search for the correct product.



  const product = products.find(product => product.id === id)

Next, we create a charge using the product data, we set the pricing_type to fixed_price so the user can’t pay any amount, the pricing type can be set to no_price this will allow the user to pay any amount, metadata field is used to send additional data to coinbase commerce for identifying the user, this metadata is useful in identifying the user and the product they paid for, in our use case we set the userID to 1.



const chargeData = {
      name: product.name,
      description: product.description,
      pricing_type: "fixed_price",
      local_price: {
        amount: product.price,
        currency: product.currency,
      },
      metadata: {
        id: product.id,
        userID: 1
      },
    };

The next two lines of codes create a charge by sending a request to coinbase commerce once this request is successful it sends the charged object to the client



const charge = await Charge.create(chargeData);
res.send(charge);

You can check the coinbase commerce documentation here.

Creating Coinbase API key

We have created our application, but we can’t create charges just yet because we need an API KEY from coinbase commerce to get started, first create a .env file at the root of the project, and add COINBASE_API and COINBASE_SECRET to the .env file, the file should look like the one below.



COINBASE_API = 
COINBASE_SECRET =

Currently, coinbase commerce doesn’t have a sandbox or a testing environment, so we will have to allow our testing with live API keys and real cryptocurrencies. So log in to your coinbase commerce account, click on the profile icon on the top right corner of the page, then click on settings.

Click on the Security tab and click on the New API key button to create an API key, then copy the API key, open the .env file and paste the keys to the COINBASE_API key.

Test Running the Application

Run the application with this command npm run dev on the terminal then view the app on your browser and click on Pay With Crypto button on any of the items, this will open a new tab to make payments.

You will have just one hour to make a payment, by choosing any of the methods below, you can choose to pay with coinbase or any of the cryptocurrencies listed below.

Verifying Transactions

Now users can buy items from your application using cryptocurrencies but can’t verify who made the transaction or what they bought. To verify transactions you need to set up a webhook URL for coinbase commerce to send an HTTP post request to that route when a user makes a payment.

Setting up the webhook route

Next, create a file pages/api/verify.js and paste the following code snippets, we will discourse the code next.



import { Client, Webhook } from 'coinbase-commerce-node';

Client.init(process.env.COINBASE_API);

export default async function coinVerifyRoute(req, res) {

    try {

        const rawBody = JSON.stringify(req.body)
        const signature = String(req.headers['x-cc-webhook-signature']);
        const webhookSecret = String(process.env.COINBASE_SECRET);
        const event = Webhook.verifyEventBody(rawBody, signature, webhookSecret);

        console.log(event)

        if (event.type === 'charge:pending') {
            // TODO
            // user paid, but transaction not confirm on blockchain 
            console.log("pending")
        }

        if (event.type === 'charge:confirmed') {
            // TODO
            // all good, charge confirmed
            console.log("confirmed")
        }

        if (event.type === 'charge:failed') {
            // TODO
            // charge failed or expired
            console.log("failed")
        }

    } catch (e) {
        res.status(500).send("error"); 
    }

    res.send(`success`); 

};

We start by importing the modules needed to make our webhook work, we will be using Client and Webhook from the coinbase-commerce-node package.



import { Client, Webhook } from 'coinbase-commerce-node';

Next, we verify that the post request is coming from coinbase commerce and not a malicious person, you can notice that we are using an environment variable COINBASE_SECRET this variable will be gotten later from coinbase commerce when we try to test our webhook. This piece of code Webhook.verifyEventBody(rawBody, signature, webhookSecret); verifies the message sender, if the message is not coming from coinbase commerce it throws an error.



const rawBody = JSON.stringify(req.body)
const signature = String(req.headers['x-cc-webhook-signature']);
const webhookSecret = String(process.env.COINBASE_SECRET);
const event = Webhook.verifyEventBody(rawBody, signature, webhookSecret);

Next let’s talk about events that can be sent by coinbase commerce, in our code we had just three events, which are charge:pending, 'charge:confirmed, and 'charge:failed, the charge:pending event is fired when the user have made payment but the transaction has not been confirmed on the blockchain, the 'charge:confirmed as the name implies is sent when the transaction has been confirmed on the blockchain, you should confirm the price before you give value and 'charge:failed' when the transaction failed.



        if (event.type === 'charge:pending') {
            // TODO
            // user paid, but transaction not confirm on blockchain 
            console.log("pending")
        }

        if (event.type === 'charge:confirmed') {
            // TODO
            // all good, charge confirmed
            console.log("confirmed")
        }

        if (event.type === 'charge:failed') {
            // TODO
            // charge failed or expired
            console.log("failed")
        }

Before you give value to your customer, first confirm the amount paid and the currency, and use the information on the metadata field, to identify customer and products, you can learn more about the coinbase commerce webhooks here.

Testing the webhook Url

To test our webhook URL we will make use of a tool called Ngrok, if you don’t have it you can install it here, once installed run the following commands



npm run dev

The above command will run our app on port 3000, next run the command below to connect your application to the internet using ngrok, make sure your application port is the same as the one on the command.



ngrok HTTP 3000

Copy the second Forwarding URL we are going to use this as our domain for the coinbase commerce URL

Setting the webhook Url

Login to your coinbase commerce account, navigate settings, and click on the notification tab, then click on the Add Endpoint past the Forwarding URL gotten from ngrok, and add the /api/verify route as shown in the image below.

Note on a live server this webhook URL should be https://your-domain/api/verify

Next get your shared secret by clicking the Show shared secret button on the bottom right corner, copy the shared secret, open the .env file and assign it to the COINBASE_SECRET .

Now let’s manually test our webhook by sending it fake requests, First, click on the edit button on the right of the webhook endpoint.

Click on the Send Test button and choose any event of you choice, let’s start we confirm as shown in the photo below.

You should get a response like this

Look at your terminal, to see the dummy data sent by coinbase commerce, feel free to test as many events as you want.

Conclusion

In this article, we built a simple web-based ecommerce shop that accepts cryptocurrencies using Next.js, we talked about coinbase-commerce-node, which is the official nodejs SDK for coinbase commerce, we created API keys in coinbase commerce, and retrieved our coinbase commerce “shared secret”, we created a payment link with coinbase-commerce using this SDK, we created a webhook URL to verify transactions, and we manually tested our webhook endpoint locally from our coinbase commerce account, using a tool named ngrok, you can get the source code of this project here, feel free to clone the repo.

How to fix defaultValue error while working with textarea in React

Joshua Evuetapha — Fri, 04 Feb 2022 01:15:30 +0000

Introduction

In HTML, if you want a textbox with some initial text you wrap text inside the textarea tag like this <textarea> Hello World </textarea>, this is fully editable, but if you try this in react you will get an error. Trying to use the defaultValue prop in react won't work either. if you add a value prop to the textarea the value of the text will be displayed but then it won't be editable, this is because the value prop is immutable.

Solution

Passing a value prop to textarea like this <textarea value={'Hello World'}> </textarea>, will display the text Hello World on the textbox, but it won't be editable to make it editable we need to pass the a state to the value prop and update that state with the onChange prop like the code below.

import { useState } from 'react';

function TextBox () {

    const [text, setText] = useState('Hello World');

   return (
           <textarea 
             value={text} 
             onChange={(e) => setText(e.target.value) }>
          </textarea>
         );

}

export default TextBox;

Inside the TextBox component, I initialize the text state with 'Hello World' and passed it to the textarea as a value prop, this will be the initial text displayed in the text area. onChange={(e) => setText(e.target.value) } this line of code updates the text state, with the new value.

You can learn more about handling form in react here

MongoDB Submission Post Trader Chart

Joshua Evuetapha — Thu, 13 Jan 2022 15:33:49 +0000

Overview of My Submission

This is a charting software for doing technical analysis on the Forex, Crypto and Stock market etc. It comes with Trend indicators like the Moving Average, Bollinger Band, Ichimoku Kinkō Hyō. It also comes with oscillators like the Relative strength index, Moving Average Convergence Divergence and Average True Range.

Submission Category:

Prime Time: Stock Analysis

Joshuajee / Trader-Chart

Trader Chart

Web Based Charting software to analyze the Forex, Stocks and Crypto Market

View App · Report Bug · Request Feature

Table of Contents

About The Project

(back to top)

Built With

(back to top)

Getting Started

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

nodejs
npm

Installation

Create A time Series collection in Mongodb Click Here a time series collection can only be created…

View on GitHub

Click Here to view the app

Additional Resources / Info

All data stored in MongoDB Atlas Timeseries collection for storing the data for each asset.

Built With

DEMO

Click Here for Live Demo

How to Integrate Typesense Search Engine in a Nodejs application

Joshua Evuetapha — Wed, 01 Dec 2021 22:48:37 +0000

Tried building an application that requires efficient search? Maybe an online store or library catalog system?

It is hard to build search engines that are typo tolerant, effective and efficient. A typographical error could make a search return nothing even though the requested item is on the database.
Typesense could save you and your app users from such stress as you would not need to spend time building a search engine. And your users can effectively use the search feature in your application which would give them a great user experience.
Typesense is an open-source typo-tolerant search engine for developers, developed to reduce the time to market for apps that require effective and efficient search.

In this article, we will cover the following:

Setting up Typesense Cloud
Setting up our nodejs app
Initializing the client
Creating a Typesense Collection
Setting up the express app
Adding item to our collection
Searching our collection

Setting up Typesense Cloud

You can use Typesense by either installing its docker image on your server or using the Typesense cloud hosting solution, which is the easiest way to get started with it, so we are using this option. Click Here to get started and sign in with Github.

Once authenticated, follow these steps.

Scroll down and launch a cluster wait for about 4 to 6 minutes.

Click on Generate API Keys. It will download a text file containing credentials needed to authenticate our app with Typesense cloud.

Setting Up the Nodejs App

Follow these steps, if you have Nodejs installed on your system if you don't download the latest version here and follow the steps.



npm init

Install the following packages express, typesense and nodemon by running the following command



npm i express typesense nodemon

Add "dev": "nodemon app.js" to the script part of the package.json file.



"scripts": {
        "start": "node app.js",
    "dev": "nodemon app.js"
  },

After these are done, setup the project structure to look like this.

📦express-typesense-app

┣ 📂Typesense

┃ ┣ 📜bookCollection.js

┃ ┗ 📜client.js

┣ 📜app.js

┣ 📜package.json

┗ 📜package-lock.json

Initializing the client

Navigate to the Typesense Folder, paste codes below in the client.js file, The first line imports Typesense into our code, then we create a Typesense Client instance, this instance receives an object of configurations, needed to authenticate our app with Typesense, next we export this client so it will be available for other files. Fill in the information gotten from the text file downloaded when you generated API keys, since we are running on the backend and we want to have write access use the Admin API Key.



const Typesense = require('typesense')

const client = new Typesense.Client({
  nodes: [{
    host: 'your-typesense-node-gotten-from-type-sense-cloud', // For Typesense Cloud use xxx.a1.typesense.net
    port: '443',      // For Typesense Cloud use 443
    protocol: 'https'   // For Typesense Cloud use https
  }],
  apiKey: 'your-typesense-admin-api-key-gotten-from-type-sense-cloud',
  connectionTimeoutSeconds: 5
})

module.exports = client

Creating a Typesense Collection

Typesense, a collection is a group of related documents, by are like tables in relational a database. When we create a collection, we give it a name and describe the fields that will be indexed when a document is added to the collection.

For each field, we define its name, type, and whether it's a facet field. A facet field allows us to cluster the search results into categories.

We also define a default_sorting_field that determines how the results must be sorted when no sort_by clause is provided. In this case, books that have more ratings will be ranked higher. This line of code client.collections().create(booksSchema) create the book collection from the book schema.

This code will throw an error if the collection already exists, to prevent the app from this crashing handle the Error, by calling the error callback. as done in the code below err => {}.




const booksSchema = {
    'name': 'books',
    'fields': [
      {'name': 'title', 'type': 'string' },
      {'name': 'authors', 'type': 'string[]', 'facet': true },
      {'name': 'image_url', 'type': 'string' },
      {'name': 'publication_year', 'type': 'int32', 'facet': true },
      {'name': 'ratings_count', 'type': 'int32' },
      {'name': 'average_rating', 'type': 'float' }
    ],
    'default_sorting_field': 'ratings_count'
  }

client.collections().create(booksSchema)
  .then( data => {

  }, err => {

  });

Setting up the express server

Create app.js on the root directory of the application, we import the express this is needed to create an express server, line 2 imports the Typesense client this client will be used to make requests to Typesense, line 3 creates the book Collection if it doesn't exist.



const express = require('express');
const client= require('./Typesense/client');
require('./Typesense/bookCollection')

Here we create an express app, the next two lines of codes attach the middleware needed for the app to receive post data from post request.



const app = express();

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

Searching for books in our collection

This route handles GET requests to localhost:3000/search?q=, the first line of code in this route get the user search input from the q query, the second line builds the search object searchParameters, from the search object we see that we are querying our books by its title and sorting by ratings_count in descending order, res.send(searchResults) sends the search results to the client.




app.get('/search', (req, res) => {

  const { q } = req.query;

  const searchParameters = {
    'q'         : q,
    'query_by'  : 'title',
    'sort_by'   : 'ratings_count:desc'
  }

  client.collections('books')
    .documents()
    .search(searchParameters)
    .then(function (searchResults) {
      res.send(searchResults)
    }, err => { res.send(error) } )
});

Adding data to book collection

This route handles POST request to localhost:3000/add-book, the first line of code get the body of the post request, which in this case is the book we want to add to our collection client.collections('books').documents().create(book) add the book to our collection. res.send(data) sends the book data to the client.




app.post('/add-book', (req, res) => {

  const book = req.body;

  client.collections('books').documents().create(book).then(data => {
    res.send(data)
  }, err => {
    res.send(err)
  })

});

This codeblock runs the server on port 3000



const port = process.env.PORT || 3000;

const server = app.listen(port, () => {

  console.log(App running on port </span><span class="p">${</span><span class="nx">port</span><span class="p">}</span><span class="s2">...);

});

Adding Item to our Collection

I will be using Postman to test this app, if you are new to Postman, click here to download it, set up a workspace, and create a collection.

I added 3 books to the book collection, titled How to use Typesense in a Nodejs application, I want to Dance, Best Dance Move with the following ratings respectively 4.55, 3.55, 4.35.

Searching for Item in our Collection

Searching for a book titled Best Dance Moves, Noticed, I deliberately made errors in the spelling by searching Bezt Dense Movee

and Typesense returns Two books that contain the word Dance in its title.

Searching for a "Harry Potter" which is not in our book collection returns zero items.

Conclusion

In this article, we talk about Typesense and how to get started with Typesense cloud, connecting to Typesense cloud, we created a typesense collection. We used the Typesense javascript library, this library works also works on Web Browsers, when used on Web Browser, use the search API key that doesn't grant write access. Typesense supports other languages click here to learn about them.

Using Postman to test our application we saw that Typesense is very typo tolerant, easy to use, and fast.

Node.js GitHub Authentication using Passport.js and MongoDB

Joshua Evuetapha — Mon, 08 Nov 2021 14:38:54 +0000

In this article, you will learn how to authenticate with GitHub using Passport.js in a Nodejs express app.

You can get the source code for this project here, this project can be used as a boilerplate code when setting up an express app that uses Passportjs for authentication.

Prerequisites:

Basic Knowledge of NodeJS
Node JS should be installed on your system. ## What is Passport.js?

Passport is authentication middleware for Node.js. It is very flexible and modular. A comprehensive set of strategies supports authentication using a username and password, Google, Facebook, Apple, Twitter, and more. Find out more about Passport here.

Creating a Github Application

Before using passport-github2, you must have a Github account and register an application with Github. If you have not done this, You can do that here.
Your Homepage URI and Callback URI should match the one in your application. Your application will be issued a Client ID and Client secret, which this strategy needs to work.

Setting up our Project

To start, create a Nodejs project by running this command.

npm init

Install the following packages by running these commands.

npm install express express-session ejs mongoose passport passport-github2 dotenv nodemon

If the command is successful, you will see something like the image below, node_modules folder will be created and package-lock.json file will also be created.

Below is the project structure for this project.
📦passportjs
┣ 📂controller
┃ ┣ 📜account.js
┃ ┗ 📜auth.js
┣ 📂model
┃ ┗ 📜UserModel.js
┣ 📂routes
┃ ┣ 📜account.js
┃ ┗ 📜auth.js
┣ 📂utils
┃ ┗ 📜github.js
┣ 📂views
┃ ┣ 📜account.ejs
┃ ┗ 📜index.ejs
┣ 📜.env
┣ 📜.gitignore
┣ 📜app.js
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜README.md
┗ 📜server.js

Setting up our Express Server

At this point, our application set. Now let’s go ahead and set up our express server. To get started, first create server*.js file* in the project root directory.
Next, import the mongoose for our database connection and dotenv to lead our environment variables with the code below:

const mongoose = require('mongoose');
const dotenv = require('dotenv');

Next, create a .env file in your project root directory, where we will store our environment variables later in this session. Then make the available in our application with the code below.

dotenv.config({ path: './.env' });

Import app.js into the code in this file export an express app, this app will be explained next in this article.

const app = require('./app');

Next, we make a connection to the mongoose database with the code below.

mongoose
  .connect(process.env.DATABASE, { useUnifiedTopology: true })
  .then(() => console.log('DB connection successful!'));

Next, we assign a port to the express application. The application will be listening to the port provided by the environment or port 8081 if there is no environment port.

const port = process.env.PORT || 8081;

app.listen(port, () => {
  console.log(`App running on port ${port}...`);
});

The following line of codes listens for the following events uncaughtException, unhandledRejection, and SIGTERM respectively, and shut down the server once either one of them occurs.

process.on('uncaughtException', err => {
    console.log('UNCAUGHT EXCEPTION! 💥 Shutting down...');
    console.log(err.name, err.message);
    process.exit(1);
});

process.on('unhandledRejection', err => {
    console.log('UNHANDLED REJECTION! 💥 Shutting down...');
    console.log(err.name, err.message);
    server.close(() => {
      process.exit(1);
    });
});

process.on('SIGTERM', () => {
    console.log('👋 SIGTERM RECEIVED. Shutting down gracefully');
    server.close(() => {
      console.log('💥 Process terminated!');
    });
});

Your .env file should look like this. Put your credentials on the required fields.

DATABASE = your-mongo-db-uri
GITHUB_CLIENT_ID = your-github-app-client-id
GITHUB_CLIENT_SECRET = your-github-app-client-secret
GITHUB_CALLBACK_URL = your-github-app-callback-url
SESSION_SECRET = your-app-session-secret-it-can-be-any-string-of-your-choice

Setting up our Express Application

Now let’s go ahead and setup our express application. To get started, create an app.js in the project root directory. first we import express, next we import express-session this is a middleware for handling user sessions in express.
Then import two route handlers on for handling authentication request and the other for handling request in user account. These route handlers will be explained next.

const express = require('express');
const session = require('express-session');
const authRouter = require('./routes/auth');
const accountRouter = require('./routes/account');

Here is where we create the express and by calling the express function which is a top level function exported by the express module and assign it to the app variable.

const app = express();

Next, we configure the directory where the template files will be located. The first line of code set the view directory to /views. The second line set the view engine to ejs. Learn more about ejs here.

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

Next we use the express-session middleware so that we can support persistent login from users. the session(options) receives an object of settings read the express-session documentation to learn more.

The default server-side session storage, MemoryStore, is not designed for a production environment. It will leak memory under most conditions, does not scale past a single process, and is meant for debugging and developing. For a list of stores, see compatible session stores.

app.use(
  session(
    { 
      secret: process.env.SESSION_SECRET, 
      resave: false, 
      saveUninitialized: false 
    }));

Here we redirect the user to the localhost:8081/auth route once they visit localhost:8081/

app.get('/', function(req, res){
  res.redirect('/auth');
});

Next, we configure two routers on the app for handling localhost:8081/auth/* requests and the other for handling account request localhost:8081/account/* these routers will be discussed next.

// set Routes
app.use('/auth', authRouter);
app.use('/account', accountRouter);

export the express app

module.exports = app;

Creating our Application Routers

First, we create a route directory. The files in this directory will be used as route handlers to handle different routes in our application.

Create Authentication Router
Create auth.js file inside the route directory, then import express and passport.

const express = require('express');
const passport = require('passport');

We import github which is an authentication middleware based on passport GitHub strategy this middleware will be explained later in this article. Also, import authController. This module is meant to contain a bunch of functions that control user authentication but for now, it just contains the logout function.

const github = require('./../utils/github');
const authController = require('./../controller/auth');

We configure passport to use the github middleware.

passport.use(github);

Here we use the express.Router() class to create modular, mountable route handlers. then we use the passport.initialize() function in the router this function is needed to initialize passportjs on our routes, passport.session() function enables persistent login with passportjs in our route it handles session.

const router = express.Router();

router.use(passport.initialize());
router.use(passport.session());

serializeUser determines which data of the user object should be stored in the session. The result of the serializeUser function is attached to the session as req.session.passport.user = {}. Here we store the whole user object

The first argument of deserializeUser corresponds to the user object that was given to the done function. The object is attached to the request object as req.user

passport.serializeUser(function(user, done) {
    done(null, user);
});

passport.deserializeUser(function(obj, done) {
    done(null, obj);
});

This line of code renders the index.ejs file in the view directory once the user visits the localhost:8081/auth route.

router.get('/', function(req, res){
    res.render('index', { user: req.user });
});

This line of codes tries to authenticate the user with GitHub once the
localhost:8081/auth/github route is visited. It Redirect the user to a GitHub conscent page and request for the user authorization, once the user authorize the app, it redirects the user back to the callback url which is localhost:8081/auth/github/callback for this application on successful login the user will be redirected to localhost:8081/account by this line of code res.redirect('/account')); .

router.get('/github', passport.authenticate('github', { scope: [ 'user:email' ] }));

router.get('/github/callback', 
    passport.authenticate('github', { failureRedirect: '/' }),
    (req, res) =>  res.redirect('/account'));

Once the user visit localhost:8081/auth/logout. the session will be destroyed and the user will have to login again.

router.get('/logout', authController.logout);

module.exports = router;

Create account routes
Create account.js file inside the route directory, the following codes below do the same function as the ones on auth.js , accountController.js contains functions for handling user accounts.

const express = require('express');
const passport = require('passport');
const accountController = require('./../controller/account');

const router = express.Router();

router.use(passport.initialize());
router.use(passport.session());

passport.serializeUser(function(user, done) {
    done(null, user);
});

passport.deserializeUser(function(obj, done) {
    done(null, obj);
});

This route handler, handles get requests sent to this route localhost:8081/account.

router.get('/', accountController.user);
module.exports = router;

Creating Utility

First, we create a utils directory. This directory is going to contain all our utility functions, for this project.

Create github middleware
This code exports a middleware this middleware is required when making an authentication request with passport-github2 strategy. Here we use passport-github2 strategy, we pass the configuration object which includes the ClientId, ClientSecret, and CallbackUrl, these values should match the one used in creating the github application. if these values are correct and up to date the callback function with four parameters with be called

accessToken - GitHub access Token
refreshToken - GitHub refresh Token
profile - contains user data gotten from GitHub
done - this is callback function with two arguments error and data is called, the profile.id data is used to query the mongo database to check if the user account exists, if it doesn't exist the user is created with the data gotten from github.

User.findOne({githubId: profile.id }) checks if a user with the same github profile exists in the database, if it does exist the return done(null, data); function will be called with the user data. If no user exists the user will be created and the return done(null, data); will be called with the user data.

const GitHubStrategy = require('passport-github2').Strategy;
const User = require('../model/UserModel');

module.exports = new GitHubStrategy({
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    callbackURL: process.env.GITHUB_CALLBACK_URL
  },
  function(accessToken, refreshToken, profile, done) {

    User.findOne({githubId: profile.id }).then((data, err) => {

      if (!data) return User.create({
        githubId: profile.id,
        fullname: profile.displayName,
        username: profile.username,
        location: profile._json.location,
        phone: profile._json.phone,
        email: profile._json.email,
        profilePhoto: profile._json.avatar_url
      }).then((data, err) => {
        return done(null, data);
      });

      else return done(null, data);
    });
  }
);

Creating Database Model

Create a model directory. This directory is going to contain all our database Models, for this project.

Create User Model
First, we create a userModel.js file inside the model directory, import mongoose into the project, then create a user schema.

Everything in Mongoose starts with a Schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.

Models are fancy constructors compiled from Schema definitions. An instance of a model is called a document. Models are responsible for creating and reading documents from the underlying MongoDB database.

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema(
  {
    fullname: { type: String },
    username: { type: String },
    githubId: { type: String, unique: true },
    location: { type: String },
    phone: { type: String },
    email: { type: String, lowercase: true },
    profilePhoto: { type: String, default: '' }
  },
  { timestamps: true }
);

const User = mongoose.model('User', userSchema);

module.exports = User;

Creating Controllers

Create a controller directory. This directory is going to contain all our controllers for this project.

Authentication controller
The auth.js controller contains one function logout to destroy user session and redirect user to the homepage.

exports.logout = (req, res, next) => {
    req.logout();
    res.redirect('/');
};

Authentication controller
The account.js controller contains one function user, req.user get the user data from the request parameter, if (!user) res.redirect('/'); redirect the user to localhost:8081/ if the user exist it readers the account.ejs templete.

exports.user = (req, res, next) => {
    const user = req.user;

    if (!user) res.redirect('/');

    res.render('account', {user: user});
};

Creating Views

Create a views directory, this directory will hold all the ejs templating codes for the application.

Create the Index ejs template
Create a file index.ejs inside the views directory. This templete renders a link to authenticate with github when user session is not available <h2>Welcome! <a href="/auth/github">Login with GitHub</a> </h2> and renders a link to view user account, when user session is available <h2>Hello, <%= user.fullname %> <a href="/account">View Account</a></h2>.

<% if (!user) { %>
    <h2>Welcome! <a href="/auth/github">Login with GitHub</a> </h2>
<% } else { %>
    <h2>Hello, <%= user.fullname %> <a href="/account">View Account</a></h2>
<% } %>

Create the Account ejs template
Create a file account.ejs inside the views directory. This template simply displays user information, stored in the database.

<div>

    <p>Full Name: <%= user.fullname %></p>

    <p>Username: <%= user.username %></p>

    <p>Email: <%= user.email %></p>

    <p>location: <%= user.location %></p>

    <p><a href="/auth/logout">Logout </a></p>

    <img src=<%= user.profilePhoto %> />

</div>

Conclusion

In this article you have learned how to authenticate users, using passport-github2 strategy, You learned how to create and configure a github application, and maintain user sessions within your application while using ejs as templating engine.