DEV Community: Mister Singh

let's convert between bytes32 & string & vice-versa

Mister Singh — Thu, 05 Jan 2023 15:51:53 +0000

Why

Before we talk about how to convert between bytes32 & string, let us first know the reason why we may want to do this.

So bytes32 has a fixed size and strings are dynamically sized. This produces some interesting cases like a contract can't return another contract a string or a contract can't call another contract with a string.

So a reasonable alternative is to use bytes32 instead of strings. This makes our code composable.

string -> bytes32

string memory input = "hicksville"
bytes32 output = bytes32(abi.encodePacked(input))

bytes32 -> string

string memory reversedInput = string(abi.encodePacked(output))

Let's dive a little in to function selectors in solidity

Mister Singh — Sat, 31 Dec 2022 18:46:30 +0000

Function selector is how we tell them smart contract which function to run. It is the first 4 bytes which we get from the functions name and it is used when calling low level functions like call on a contract and asking it to run a function.

For example function foo(){ } has selector 0xc2985578

Side Note: The function selector is most probably unique for a contract. It is just 4 bytes and that is not a lot of data and thus there can exist another function which has a totally different name but same selector. But that is neither here nor there, so let's move on.

To build a selector in solidity:

convert the function name to bytes
then get its keccak256. this gives us a 1 way hash which has fixed size
now take the first 4 bytes of that hash.

bytes4(keccak256(bytes("foo()")))

Now, this is good, but most likely the function also takes input params and the values of the input also need to be encoded in to bytes and added to the selector.

So let's say we have a function like foo(uint256) which we want to call with value of 1. then we can get the encoded value like this

bytes4 prefix = bytes4(keccak256(bytes("foo(uint256)")))
uint a = 1;
bytes32 suffix = bytes32(a);
bytes memory ans = abi.encodePacked(prefix, suffix);

and this gives us 0x2fbebd380000000000000000000000000000000000000000000000000000000000000001

So this worked, but there is abi.encodeWithSignature which is an easier way to get the selector with values all encoded in bytes for us to use.

And there is another helper function abi.encodeWithSelector which takes the selector from us and just encodes and appends the inputs for us.

And finally the same can be done in javascript using ethers.js. We can build an interface with just the function whose selector we want and call getSigHash to get the selector

Ethers also supports encoding input values as well

So thats it. now you know how to encode & build function selectors with & without inputs, from solidity & from the frontend.

How I used web workers to make my react app stop freezing

Mister Singh — Thu, 08 Dec 2022 19:12:04 +0000

The Problem:

I have been working on this site – app.sidekik.xyz. It polls the users hard-drive every few seconds and reads their code, detects changes & then rebuilds the UI to interact with that code. As you can imagine that reading large files is heavy work and the app started to become slow when reading a large number of large sized files 🐢.

The why?

In the browser there is only 1 thread, the main thread, which is the only thing taking user inputs and updating the UI. Now, if you run JS code which is eating up too much of its resources, then the app's UI will start to suffer. So yea 😬.

The Solution:

With web workers, we get setup another thread, then offload any amount of work to this thread, thus reducing the load on the main thread and making it not hang 🚀.

Basis Code:

First get npm i workerize-loader. This enables loading any es6 module as a worker and then call the functions it exports. It also supports async/await, which makes it much easier to interact with the worker functions.

Here is my worker file: src/workers/bg.js

import md5 from "md5";
import readJsonObjFromFileHandle from "../helpers/readJsonObjFromFileHandle";

export async function getFileMd5(fileHandle) {
  const fileJsonObj = await readJsonObjFromFileHandle(fileHandle);
  const fileStringObj = JSON.stringify(fileJsonObj);
  const fileMd5 = md5(fileStringObj);
  return fileMd5;
}

Then i load this worker in my app like this:

import { useEffect } from "react";
import worker from "workerize-loader?name=bg!../workers/bg";
import worker from "../workers/bg";

const workerRef = useRef();

useEffect(() => {
  workerRef.current = worker();
  return () => {
    workerRef.current.terminate();
  };
}, []);

Note: Here I am setting up 1 worker to run when the app starts up and then letting it run as long as the app is there. I found this to perform better than creating a then terminating the worker, on a need only basis.

Upon loading the App now, we can see there is a worker.

Next, we just have to use this worker in my polling function:

const readFiles = () => {
  const fileMd5 = await workerRef.current.getFileMd5(fileHandle);
// rest of application logic here to use the files md5
}
setInterval(readFiles, 2000);

The result:

Now the app is no longer slow, as the main thread is no longer running code to read files & check their md5's.

🎉🥳🎉🥳

Get a head start with badass hardhat workflow

Mister Singh — Mon, 21 Nov 2022 04:49:28 +0000

In this article I will first show you what a badass hardhat setup looks like and then second I will teach you so you can have the same.

The 5 things a badass hardhat setup has:

Auto compile & deployment of code in development
Auto builds & maintains a file with every contracts address & abi.
A generic UI for your contracts, which hot reloads as contract code changes.
A single command to deploy contracts to testnet & mainnet
A single command to verify contracts.

Now, let's take a look at this setup IRL:

The code for this badass hardhat setup is here.

Here are the steps for you to have this same setup:

Clone this repo & install dependencies

git clone https://github.com/mistersingh179/badass-hardhat-setup
npm i

Then in a terminal window run the hardhat chain locally npm run chain
Next, in another terminal window run the deployment script npm run deploy
That's it. You should now have your chain running locally and code deploying to it in real-time.

Let's test our setup.

Open your favorite IDE and you should see *.sol files in the contracts directory.
There should also be a file called contract-addresses.jsonbeing auto built everytime you change code.
Go ahead, change the code in the IDE and you should see in terminal that it is auto deploying and the contract-addresses.json has been updated.
For a UI, browse to sidekick.xyz, upload contract-addresses.json and press continue. You should have a UI for your contracts.
Make changes to your contracts now, you should see them also being updated in UI.

Deploy to testnet & mainnet

When you are ready to deploy your code run npm run deploy-goerli or npm run deploy-mainnet
Then to verify the contracts do npm run verify-goerli or npm run verify-mainnet

Writing new contracts

To add a new contract, just add a *.sol file in the contracts directory.
Then add a deployment script for that contract in deploy directory. Copy paste existing deployment scripts and just change the contract name. This way it is less prone to errors.
The contract should get auto-deployed now.

This is it. You too now have a badass hardhat setup. 🥳🎉

FYI – In case you want to see how all this is setup, just take look at the hardhat.config.js file and read the documentation of hardhat & its plugin hardhat-deploy

Rails like scope methods in Objection.js (NodeJS ORM)

Mister Singh — Tue, 10 Mar 2020 02:54:41 +0000

Let say we have a model called Label

const { Model } = require('objection')
class Label extends Model {
    static get tableName() {
        return "labels"
    }
    static get jsonSchema () {
        return {
            type: 'object',
            required: [],
            properties: {
                id: { type: 'integer' },
                name: { type: 'string' }
            }
        }
    }
}

Now we want to get the last Label in the model.

const label = await Label.query().orderby('id', 'desc').limit(1).first()

Although this gets us the last label, it has a few shortcomings:

It is verbose
It requires too much repeated typing and thus prone to errors
Its harder to test
It doesn't read well
And things only get worse when its used in conjunction with other methods

Here are 3 ways to approach this:

Modifiers
A Regular Class Method
Custom QueryBuilder Object

Lets dive into each of these one-by-one.

Approach 1: Modifiers

Modifiers is my preferred way to solve this. We specify a function on the modifiers object which:

receives the query as a param
it then modifies the query by adding its filters etc.

Label.modifiers.last = query => {
    query.orderby('id', 'desc').limit(1).first()
}

Now lets get the last record by using this modifier

const label = await Label.query().modify('last')

This reads so much better, encapsulates all logic under one function and we can test that one function easily.

The logs show that it ran:

select "labels".* from "labels" order by "id" DESC limit 1

With params

Lets build another modifier which gets all labels which start with the passed in letters

Label.modifiers.startsWith = (query, letters) => {
    query.where('name', 'like', `${letters}%`)
}

Now lets run it

labels = await Label.query().modify('startsWith', 'XYYZ')

And logs show:

select "labels".* from "labels" where "name" like "AC%"

Combining multiple modifier functions

This is where i think modifier functions start to shine, just like scopes do in Rails.

So lets say we need the last label which starts with 'A'. We can achieve this by using our startsWith & last modifier functions together.

const label = await Label.query().modify('startsWith','A').modify('last')

And our logs have:

select "labels".* from "labels" where "name" like "A%" order by "id" DESC limit 1

Approach 2: Class method on Label

A regular static method on Label class. We can have this method return the last record:

Label.last = () => {
    return await Label.orderby('id', 'desc').limit(1).first()
}

This gets the job done, but not as good as a modifier function. Yes it reads good and encapsulates the work but it doesn't return the query object and thus can't be chained

Approach 3: Custom QueryBuilder

We can build our custom query object and have label class use our query object. On our custom query object we can define a custom methods which modify the query() object directly.

This will allow us to modify the query by calling an internal method of the query object, without writing the words modify and explicitly making it clear that we are modifying the query.

Lets see an example:

class MyQueryBuilder extends QueryBuilder {
  last () {
    logger.info('inside last')
    this.orderBy('id', 'desc').limit(1).first()
    return this
  }
}

class Label exteds Model {
    static get QueryBuilder () {
        return MyQueryBuilder
    }
}

Now to use it:

cons label = await Label.query().last()

I think this approach is an abuse of power. It works, but we have a cleaner way of modifying the query and we should do that instead of defining a custom query object which has special internal methods.

I think this custom query class might have good use cases though for other things like logging, making some other service calls etc.

Conclusion

modifiers are great. the ability to chain them make them an asset.

What's Next

Use modifiers with complex queries which use:

join
graphFetch (eager loading)
use ref where we have ambiguous table names