DEV Community: Melvin Kosisochukwu

Common mistakes you might make using the near-sdk-as and assemblyscript

Melvin Kosisochukwu — Sun, 30 Jan 2022 16:15:00 +0000

In this article, we will be exploring a few mistakes that you might make when getting started with the near-sdk-as. Before we dive into these mistakes, let us look at the near-sdk-as.

Introduction

The near-sdk-as package is used to write smart contracts to interact with the NEAR Blockchain. These smart contracts are written using assemblyscript, a typescript-based programming language optimized to compile to WebAssembly. Now I know what you might be thinking, "assemblyscript is typescript based, then it must be similar to typescript"… well, you are not wrong, but you are also not correct. If you are coming from a javascript/typescript environment, this thinking already sets you up to make inevitable mistakes when working with assemblyscript and the near-sdk-as.

Let's look at these common mistakes:

Common Mistakes

Javascript/Typescript packages

You need to note that you cannot use Typescript/Javascript libraries with assemblyscript… I tried. It would be best to stick to strictly assemblyscript packages to avoid breaking your code.

Generating Random Numbers

Generating random numbers with assemblyscript is not exactly as easy as you get to do it in Javascript, but do not worry, near-sdk-as have an easier way to do this using the RNG class. It would be best to always browse through the documentation for packages before using them. Here is a sample use case for the RNG package:

import { RNG } from "near-sdk-as";
...
const roll = new RNG<u32>(1, u32.MAX_VALUE);
const randomNumber = roll.next();
//roll.next() will return a random number that falls withing the max value for a u32(32 bit unsigned integer) data type
...

For more information on how this works, you can read the documentation here.

Date.now() ?

The blockchain provides you with a timestamp(literally). The Context class has a property blockTimestamp that returns the current time in nanoseconds. It would be best not to use the native date constructor to get the current date and time.

import { Context } from "near-sdk-core";
...
export function currentTime(): u64{
  const time = Context.blockTimestamp;
  return time;
}
...

Using Signer the right way

The signer property from the near-sdk-as Context class has a special use case: it can only be used in “change” functions/methods. There exist two types of methods/functions on the NEAR blockchain; change and view methods.

View Methods: These are methods that fetch or retrieve information from the storage.
Change Methods: These are methods that mutate/update the storage.

The change methods are transactions; therefore, it requires an account to sign these transactions. The property signer on the Context class can be used to access the account that signed the change method called. View methods do not require to be signed; therefore, signer property does not return an account for these methods. Some might find themselves trying to access a signing account from Context class in a view method, resulting in your smart contract panicking/failing.

Summary and Resources

The mistakes above and a few that is not listed can be avoided or easily navigated by exploring the official documentation and reviewing a few open-source smart contracts provided by the NEAR Edu and NEAR community(https://github.com/Learn-NEAR).

Using Doppler In a React-Firebase Application

Melvin Kosisochukwu — Wed, 29 Sep 2021 08:20:18 +0000

Handling secrets/environment variables on a team/personal codebase can be very stressful. Doppler helps you scale through this problem by providing an environment to store your secrets that you and your team can use. You will like to keep most of these environment variables within the team; hence, it’s not best to push it to a GitHub repository to avoid vulnerability. In this article, we will look through how to implement Doppler with a React-firebase app.

Introduction

Doppler is a universal secret manager; this means that you can use doppler to manage secrets across applications within groups with less risk of vulnerability and ease of work. Doppler makes it easy for you to share environment secrets for application and development with your team. It also eases integration with most of your cloud platforms.

Why use Doppler ?

Scalability: It makes it easy to scale and make changes to environment variables in your application
Ease of Work: Doppler allows you to focus on the core functionality of your application, removing the complications of sharing environment secrets across team members.
Doppler supports integration with multiple cloud/hosting platforms for your application.

Setting up Doppler

For this tutorial, we will be setting up doppler for a simple react-firebase application; we will look at how to fetch and read the secrets in our application. Before we get started, we need to set up the doppler CLI; I will be walking you through how to do this on a mac.
Run the command below in your terminal to install doppler

brew install dopplerhq/cli/doppler

Once we have the doppler CLI installed you can run the doppler command with the --help flag to see a list of commands that are supported.
To verify the doppler CLI version we run

doppler --version

I am currently working with v3.32.0. Next, I will need to login from my terminal; to do this you run the doppler login command below and select y

doppler login
? Open the authorization page in your browser? (Y/n) y

The command will open a browser window and prompt you to enter an auth code that will be made available on the terminal.

? Open the authorization page in your browser? Yes
Your auth code is:
kansas_loganberry_jewelry_lime_walnut

Waiting...

Once you enter the auth command, click next to navigate to the next screen and enter the token name.

Click on finish login, and voila! CLI authentication to your Doppler account completed.
Note: You will need to log in to your doppler account if you have not previously done this.

Setting Up React-Firebase Application

It's time to set up our application; we will have a simple React application that writes messages and reads all messages written to the firestore. We will also build a rest api with the firebase cloud functions, this will be hosted on firebase. While setting up a firebase application on the console, enable hosting. Once we have everything set up, it's now time to handle integrating the secrets to doppler. I will be setting up the API key for an ip details API on Doppler, thus

I will be using this API key later in the application. Next, we need to create the firebase functions;

firebase init

Then select functions, the language you want to write your functions in(I will be choosing JavaScript) and the project to use. Select yes for the rest of the option to successfully create your cloud functions. Once you are done this will create a folder “functions”. Next up is to cd into the folder and install express.

cd functions && npm install express

Using Doppler in your application

In the root of the folder, create a file called environment.js, this will hold all the env configuration for firebase. In the environment.js file copy and paste in this code;

const functions = require("firebase-functions");

let config = process.env;
// use firebase config when deployed to firebase
const deployedToFirebase = process.env.NODE_ENV === "production";
if (deployedToFirebase) {
  config = functions.config().env;
}

module.exports = config;

The code block above will check if the app is in production and set the value of config to functions.config().env. Go into the package.json and update the scripts to use the doppler environments on deploy.

...
"serve": "doppler run -- firebase emulators:start --only functions",
"shell": "doppler run -- firebase functions:shell",
"start": "npm run shell",
"deploy": "npm run update_config && firebase deploy --only functions",
"update_config": "firebase functions:config:unset env && firebase functions:config:set env=\"$(doppler secrets download --config prd --no-file --silent)\"",
"logs": "firebase functions:log"
...

This will set up our firebase api to use doppler environments locally and in production.

Using secrets in firebase application

To use the environment variable, we will need to bring in the config created in the environment.js file, and just like accessing key values pairs in object literals, we will access the API_KEY variable stored on doppler.

const environments = require("./environment");
...
app.get("/", async function(req, res) {
  try {
    const {data} = await axios("https://ipgeolocation.abstractapi.com/v1/?api_key=" + environments.API_KEY);
    res.status(200).json(data);
  } catch (error) {
    res.status(500).send(error);
  }
});
...

In the code block above, we import the environment file and use it to access the API_KEY variable, environments.API_KEY.

Once done with building the API we can deploy it on firebase by running the deploy script;

npm run deploy

In our react application we will be consuming the api deployed to firebase to write new messages and read all messages written to firestore.

Conclusion

In this article, we looked at how to integrate doppler in managing secrets in our firebase application. We also looked at consuming the firebase API in our react application.To review full firebase functions and doppler configuration, you can find the source code in this GitHub repository. You can also find the complete frontend source code here. For additional information on integrating Doppler with other applications/platforms, you can refer to the official documentation.

Deploying React App With Router On Netlify

Melvin Kosisochukwu — Sat, 25 Jul 2020 13:46:58 +0000

Netlify has made it easy to deploy react projects for free, amazing right?.
When I first tried to deploy an app with a router I came across a slight obstacle, this was an easily solved issue but at that moment, it was a little hard for me to get through it.
This article is to help the next newbie that might come across such issues.

The solution to getting your routing to work on Netlify lies in one file, the netlify.toml file. This is the netlify configuration file, for mor information on this check here.

All you have to do is create a netlify.toml file in your root folder and inside the file include this code:

This will catch all the redirects and your React app should work just fine.

You can run npm build and manually upload your files or link it to your GitHub/Gitlab/Bithub repository and netlify will handle the continuous integration for your app(i.e all new changes pushed to your repository will be reflected online without you having to rebuild the app)

I hope this article helps someone and if you have any inquiries or questions you can leave a comment, thank you.

React: A Peek Under The Hood Part 1

Melvin Kosisochukwu — Sat, 25 Jul 2020 11:31:26 +0000

For most people who write React application, the starting point is usually with npx or create-react-app CLI. I am not different from this group, I kicked off learning react using CLI tools without prior knowledge of how React works under the hood. Although there is nothing wrong with this, there are a few perks to knowing how React works without the fancy tools and packages that come with the CLI boilerplate.
I will be walking you through the most basic parts of building pure react apps with React CDN. Create a basic HTML file and insert a div with the id root, you can name the id anything but, I chose root because of popular convention and practice 😁.

After this go over to (https://reactjs.org/docs/cdn-links.html) and grab the CDN links for React and React-dom. You have options to choose from development and production. Now create a .js file and link it beneath the CDN files, at this point your HTML file should be looking like this.

Now that we have our HTML and JavaScript file set up let's start writing pure React codes :-D.

Open up the Js file and declare a function(App) just like you'd normally do with boilerplate React app. Inside your function return React.createElement('p', {}, 'Hello World').

I know it is all starting to look weird and new to you but if you look closely, you notice something familiar(createElement), this is the same API used in creating new DOM elements in javascript. Now let me break everything down.

The React.createElement Method is passed 3 parameters.

The first one is the element tag that you are creating.
The second parameter holds the properties of the element (props, classes, id).
The third parameter holds the children of the element, in this case, it is the string 'Hello World'.

How exactly do we get this to render/make it display in the browser? that is the power of the react-dom. Just under the App function, insert this : ReactDOM.render(React.createElement(App), document.getElementById('root'));

If you look at the line of code, you will notice that the App component/function is created before gluing it to the HTML page using the react-dom, the ReactDOM.render takes two parameters; The first parameter holds the component while the id of the DOM element that the component is to be appended in goes inside the second parameter.

The react-dom serves as a glue, it takes the component and renders it inside the element passed in the second parameter.

If you have followed all these steps, congratulations you just wrote your first code using pure react.

I will dive deeper and review how to pass in properties and multiple child elements using pure React in the next part.

Make sure to leave a Reaction and Follow 😉, Thank you.

A Dive Into React Hooks

Melvin Kosisochukwu — Thu, 23 Apr 2020 21:10:28 +0000

If you have ever worked with React State, you must have come across ‘this’ binding. Personally, I do not like the use of classes in React and somewhere out in the world, there are people who don’t fancy using classes in React as much as I do. You're in luck, with the addition of React hooks that gets rid of the classes, ‘this’ binding and still does the same works that react states do with shorter, cleaner code.
React hooks is an addition that was introduced with React 16.8. They let you use state and other React features without writing a class.
Generally using classes in react results to a lot of lines of code that can be easily cut down using a function. A simple hello world program will look like this with classes and state.

When using a function and React hooks you can optimize this same code down to:

If you observe the two codes you can clearly see that Hooks make things easier for you with shorter, faster code.
Now let’s go into how React hooks actually work, what you should know before using react hooks.
Before you decide to use React Hooks there a JavaScript principle you should already be proficient in and that is destructuring.
What is destructuring? This is simply unpacking the values of an array or object into a distinct value. There is a really good article on destructuring here.
React hooks uses the principles of destructuring to unpack values from the useState() function.

The left side is where the variable name is declared. The first item is the variable name for the state and the second item in the array separated by a comma is the function for setting the value of the state, this serves the same purpose as the setState() function in classes.
The right side is where the destructured array (useState function). The parameter for the function is where the value for the state is initialized. It might take a little getting used to but when you start using the hooks it gets a little bit easier.
The setValue function can be used to update the value of the state.

The setValue function is called on button click and updates value from ‘World’ to ‘Earth’.
For further insight on react hooks, you can check out the documentation from the React Team.