Forem: Samson Adesanoye

How to add Filtering to Jquery Datatables

Samson Adesanoye — Sun, 31 Dec 2023 23:37:18 +0000

DataTables has a number of table control elements available and where they are placed in the DOM. The table control elements is defined by the dom parameter. This parameter can be a little confusing at first, because letters are used to represent different element for example the letter B is used for Buttons in the example below:

$('#myTable').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

Meaning:
l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element

Plugins:
B - Buttons
R - ColReorder
S - Scroller
P - SearchPanes
Q - SearchBuilder

Conclusion
Combining plugins together with different letters bring the best out of jquery datatables.

How to Fork Ethereum Mainnet With Hardhat

Samson Adesanoye — Wed, 08 Feb 2023 01:09:27 +0000

During the development or review of smart contracts, it may be necessary to evaluate your smart contracts against pre-existing smart contracts such as decentralized exchanges or flash loans without the cost of spending real ether.
In this article, you will learn how to fork Ethereum mainnet using Hardhat.

What is Hardhat?
Hardhat is an Ethereum development environment for professionals, it comes with tools such as Hardhat runner, network, and VSCode extension that make development flexible, extensible, and fast.

Why Fork Ethereum Mainnet?

It allows manipulating the signer even if you don’t have access to its private key.
It allows testing a contract with access controls, address is all needed to impersonate it.
It allows testing mainnet smart contracts without using real ethers.
It allows you to write script impersonating mainnet account.

Prerequisite:

Install node and npm

Create New Hardhat Project

We will be using a hardhat project, you can feel free to skip this if you already have.

Create folder project: Open your terminal and enter the command below.

mkdir mainnet-fork-tutorial
cd mainnet-fork-tutorial

Initiate npm in the project: Initialize npm in the created project.

npm init -y

Install hardhat

npm install --save-dev hardhat

In the same directory where you installed Hardhat run:

npx hardhat

Select create a JavaScript project with your keyboard and hit enter, to create a fresh hardhat project; this might take time depending on your internet connection.

Install dotenv: we will be using dotenv to store environment variables.

npm i dotenv

Create API Key

We need an remote procedure call (RPC) node, Hardhat recommends we make use Alchemy because they offer Full archive nodes; which are a type of node that contains all the information about a blockchain from the genesis or original block.

Create an alchemy account: Create your free alchemy account at https://auth.alchemy.com/signup and confirm your email.

Create an app: In your alchemy dashboard, click on + CREATE APP button. This brings a popup to create a new app. Fill in the name and description in the form and click CREATE APP button. Example:

Name: mainnet-fork
Description: Description of what your app does so you can keep track.
Chain: Ethereum (default selection)
Network: Mainnet (default selection)

View key: Once your new app is created, the pop disappears. The app appeared under the Personal Apps table. Locate the newly created app in the table and click on the view key button. Copy the API KEY.

Fork Ethereum mainnet

Open the newly created mainnet-fork-tutorial project with your favorite editor.

Create .env file: create a .env file in the root of mainnet-fork-tutorial project.

MAINNET_RPC_URL=your_app_api_url_from_alchemy

Edit hardhat.config.js: Edit hardhat.config.js we will be adding a new network called hardhat in module.exports object.

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();

module.exports = {
  solidity: "0.8.17",
  networks: {
    hardhat: {
      forking: {
        url: process.env.MAINNET_RPC_URL,
      },
      chainId: 1,
    },
  },
};

You can also pin the block number:

networks: {
  hardhat: {
    forking: {
      url: process.env.MAINNET_RPC_URL,
      blockNumber: 14390000
    }
  }
}

Run Network: In your terminal, enter the command below to start hardhat node.

npx hardhat node

Conclusion
Now you have forked mainnet locally, you can take it a step further by deploying smart contract or Impersonate a mainnet Accounts With Hardhat, the use case is unlimited.

Resources:

Forking other networks | Ethereum development environment for professionals by Nomic Foundation

How to Fork Ethereum Mainnet

How to create new role in voyager with dashboard access

Samson Adesanoye — Sun, 03 Jan 2021 21:34:41 +0000

Voyager is simply an admin for your Laravel, it comes with a-lot of features under the hook, including roles and permission, by default voyager comes with two roles: user and admin role.

Create new role on voyager dashboard:

Login in into your dashboard
Select the roles in the menu tab
To allow this role access to the dashboard i.e any user having this role can also login into the dashboard. Check the Browse Admin option as showed in the image below

Click on submit when you are done.

Congratulation you just created your new role.

How to use TinyMCE In Your Custom Voyager View

Samson Adesanoye — Sat, 02 Jan 2021 20:55:38 +0000

TinyMCE is an online rich-text editor released as open-source software, its website describe it as the most advanced WYSIWYG HTML editor designed to simplify website content creation. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. It is the default textarea fields editor used in Voyager (The Missing Laravel Admin).

Here are the steps in including TinyMCE in your custom voyager view:

Create textarea field add the class richTextBox to the textarea. i.e

<textarea  class="form-control richTextBox" name="body" required>
{!!  old('body') !!}
 </textarea>

Here is an example commit to voyager source code where TinyMCE was implemented and you can draw some ideas from it.

Customize the minimum height of TinyMCE: The default minimum height of TinyMCE in Voyager is 600 in height, and it is represented with the min_height variable.

var additionalConfig = {
      min_height: 100,
}

$.extend(additionalConfig, {!! json_encode($options->tinymceOptions ?? '{}') !!})

tinymce.init(window.voyagerTinyMCE.getConfig(additionalConfig));

Source:

List of possible key and value

How to override a Voyager View

Samson Adesanoye — Fri, 09 Oct 2020 01:07:09 +0000

Voyager comes with BREAD (Browse Read Edit Add Delete) functionality right out of the box with elegant admin dashboard, situation may happen that you may want to serve the BREAD with something juicy apart from the default Voyager template.

In this article I will work you through creating your own custom Edit Add View, by default Voyager make use of just one Edit Add View file located in vendors/tcg/voyager/resources/views/bread/edit-add.blade.php.

Let say we want to override the Edit Add view for the cities (BREAD) table we created:

Create a folder called vendor in your views folder
Create a folder called voyager in your vendor folder
Create a folder for that BREAD in our example its cities folder
Create a new file edit-add.blade.php
Create a new HTML Heading element in edit-add.blade.php saying “override works”.
Copy the default edit-add.blade.php into the new created edit-add.blade.php to make editing fast

Your folder structure will look like this

This is also applicable to other views also.

Sources:

Overriding BREAD Views