DEV Community: Suraj975

Automate Smart Contracts (Chainlink Keepers )

Suraj975 — Sat, 20 Aug 2022 08:11:32 +0000

One of the easiest decentralized ways to automate the smart contract function execution is through chainlink keepers. I have implemented a crypto price pair prediction game which involves execution and adding of new rounds which are completely automated through chainlink keepers. While implementing it I learned a lot of things and like to share them with the community.

Key Features:

It reduces the hassle of implementing a separate centralized backend code to handle these automation processes and hence improving overall efficiency and productivity.
The integrations process is fairly simple and well documented by the chainlink team.
Reduces overall cost and burden of the backend.

How does it work?

There are three things that cover the whole process of the chainlink keepers.

Chainlink Upkeeps are responsible for executing contract function or a specific operation based on certain conditions.
The chainlink keepers need to keep the registry of the contract whose function you want to automate through upkeeps.
Keepers nodes are responsible for tracking all the tasks added in upkeeps, every time when a block gets added to the blockchain.

The blockchain networks that are supported include Ethereum, Polygon, BNB chain, Avalanche and Fantom.

Implementation:
Example taken from chainlink document

    // SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

// KeeperCompatible.sol imports the functions from both ./KeeperBase.sol and
// ./interfaces/KeeperCompatibleInterface.sol
import "@chainlink/contracts/src/v0.8/KeeperCompatible.sol";

/**
 * THIS IS AN EXAMPLE CONTRACT THAT USES HARDCODED VALUES FOR CLARITY.
 * THIS IS AN EXAMPLE CONTRACT THAT USES UN-AUDITED CODE.
 * DO NOT USE THIS CODE IN PRODUCTION.
 */

contract Counter is KeeperCompatibleInterface {
    /**
    * Public counter variable
    */
    uint public counter;

    /**
    * Use an interval in seconds and a timestamp to slow execution of Upkeep
    */
    uint public immutable interval;
    uint public lastTimeStamp;

    constructor(uint updateInterval) {
      interval = updateInterval;
      lastTimeStamp = block.timestamp;

      counter = 0;
    }

    function checkUpkeep(bytes calldata /* checkData */) external view override returns (bool upkeepNeeded, bytes memory /* performData */) {
        upkeepNeeded = (block.timestamp - lastTimeStamp) > interval;
        // We don't use the checkData in this example. The checkData is defined when the Upkeep was registered.
    }

    function performUpkeep(bytes calldata /* performData */) external override {
        //We highly recommend revalidating the upkeep in the performUpkeep function
        if ((block.timestamp - lastTimeStamp) > interval ) {
            lastTimeStamp = block.timestamp;
            counter = counter + 1;
        }
        // We don't use the performData in this example. The performData is generated by the Keeper's call to your checkUpkeep function
    }
}

In your contract, there are two functions that need to be implemented which are checkUpkeep and performUpkeep as seen above in the above contract.

Import these functions from KeeperCompatible.sol from openzeplin.
import "@chainlink/contracts/src/v0.8/KeeperCompatible.sol";
checkUpkeep : This method checks whether a certain condition is met at every block addition. This function runs off-chain to reduce on-chain gas usage and allows you to do gas-intensive calculations off-chain in checkUpkeep and pass the result to performUpkeep on-chain.

function checkUpkeep(
bytes calldata /* checkData */
) external view override returns (bool upkeepNeeded, bytes memory performData) {
upkeepNeeded = false;
uint[] memory lessBalance = new uint[];
for (uint256 i = 0; i < SIZE && !upkeepNeeded; i++) {
if (balances[i] < LIMIT) {
// if one element has a balance < LIMIT then rebalancing is needed
lessBalance.push(balances[i]);
upkeepNeeded = true;
}
}
performData = abi.encode(lessBalance); // This value is received as an argument in performUpkeep function.
return (upkeepNeeded, performData);
}

Two values are returned from the function, one is upkeepNeeded which is a boolean value that determines whether the certain condition is met and the other is performData that you want to send to performUpkeep function when upkeepNeeded is true.

As it runs off-chain, it will always be external and no contract state can be updated which basically makes it a view function.

In the above example when the balance is less than a limit, then a certain action needs to be done which will update the state of the contract.

performUpkeep: This function runs on-chain and is responsible for updating the state of the contract or executing certain contract functions whenever the checkUpkeep returns a true value.
This function is run externally and does not have a view as it modifies the state of the contract.

function performUpkeep(
        bytes calldata /* performData */
    ) external override {
        bool performDataValueRecieved = abi.decode(performData, (bool));

        uint256 increment;
        uint256 _balance;
        for (uint256 i = 0; i < SIZE; i++) {
            _balance = balances[i];
            // best practice: reverify the upkeep is needed
            if (_balance < LIMIT) {
                // calculate the increment needed
                increment = LIMIT - _balance;
                // decrease the contract liquidity accordingly
                liquidity -= increment;
                // rebalance the element
                balances[i] = LIMIT;
            }
        }
    }
}

Once the contract is deployed to your preferred chainlink-supported blockchain network.

Get Link Tokens

In order to perform upkeep operation off-chain we need ERC-677 LINK for it to operate. The link token contract is ERC-677 contract, which is an extension of erc20 contract and compatible with erc20 protocol standard. It can carry data during transfer and trigger the business logic of receiving contracts, which can help smart contracts expand application scenarios.

Connect to a blockchain network that supports chainlink keepers. Make sure the account has the tokens.

Visit this link to receive Link tokens.

I am connected to matic testnet, so I will be receiving link tokens in exchange for matic.

Registering Contract to Chainlink keepers

Chainlink Keepers provide two methods for automating the process. Visit this link to register the new upkeep for your smart contract.
Keepers

Time-based: As the name suggests, it performs operation in upkeep when a certain time condition is met. You need to specify the Cron expression to create time schedule.

Finally, enter upkeep details

Custom logic: This basically means, that execution is not based on time but on certain pre-defined conditions which when met will execute the upkeep method.

CheckData is basically static data that you will receive as an argument in your upkeep function.

Fill up the form and then you will see the dashboard which shows the current balance of links and automated transaction events when the upkeep is executed. The link balance gets depleted on every execution of the upkeep method. The ethereum-based contract uses a lot of Link token compared to other blockchain networks.

Common Issues related to upkeep function not executing

Add the maximum gas limit when filling up the form. Keep a buffer between 300,000 - 500,000.
Check the minimum link balance and refill it.
Double check the condition present on upkeep.

For more in-depth information, please refer these chainlink documents link.

Hope this article would have helped you in implementing a chainlink keepers.

CKEditor Image upload with Firebase and React

Suraj975 — Wed, 09 Sep 2020 15:49:25 +0000

CKEditor is an awesome opensource project that offers tons of tools similar to Microsoft word. I have been using this editor on the website that I recently created (https://www.codingnotesonline.com/). However, for the image upload option in CKEditor, it requires a server to store the images. The examples mentioned in the documents are specifically based on PHP for the backend side and you can find more examples of similar implementation in Nodejs. The problem was that I was using firebase for all the backend worked and didn't find a proper example to implement it with firebase.

How to Implement CKEditor Image upload with Firebase in React ?

I have used firebase upload functions and added in custom adapter function of CKEditor.
Firebase(upload function):(https://firebase.google.com/docs/storage/web/upload-files)
CKEditor(custom adapter):(https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html)

In the below example, MyUploadAdapter is the custom adapter in which we use a firebase upload function that returns a URL, which is a link to an image stored in the firebase server. This link is then used by the CKEditor to display it on the page.

Firebase also offers several upload stages that you can use to show the progress of image upload to the user.

Below is a complete working example that you can implement in your project.

import React from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
//import firbase from your directory


class MyUploadAdapter {
  constructor(loader) {
    this.loader = loader;
  }
  // Starts the upload process.
  upload() {
    return this.loader.file.then(
      file =>
        new Promise((resolve, reject) => {
          let storage = firebase.storage().ref();
          let uploadTask = storage
            .child(file.name)
            .put(file, metadata);
          uploadTask.on(
            firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
            function(snapshot) {
              // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
              var progress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              console.log("Upload is " + progress + "% done");
              switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED: // or 'paused'
                  console.log("Upload is paused");
                  break;
                case firebase.storage.TaskState.RUNNING: // or 'running'
                  console.log("Upload is running");
                  break;
              }
            },
            function(error) {
              // A full list of error codes is available at
              // https://firebase.google.com/docs/storage/web/handle-errors
              // eslint-disable-next-line default-case
              switch (error.code) {
                case "storage/unauthorized":
                  reject(" User doesn't have permission to access the object");
                  break;

                case "storage/canceled":
                  reject("User canceled the upload");
                  break;

                case "storage/unknown":
                  reject(
                    "Unknown error occurred, inspect error.serverResponse"
                  );
                  break;
              }
            },
            function() {
              // Upload completed successfully, now we can get the download URL
              uploadTask.snapshot.ref
                .getDownloadURL()
                .then(function(downloadURL) {
                  // console.log("File available at", downloadURL);
                  resolve({
                    default: downloadURL
                  });
                });
            }
          );
        })
    );
  }
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onInit={editor => {
                      editor.plugins.get("FileRepository").createUploadAdapter = loader => {
                        return new MyUploadAdapter(loader);
                      };
                    }}
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

This is a boilerplate code that you can use and make changes as per your needs. I hope this would help you and saved a lot of your time finding the solution to it.

Cloud Firestore Nesting Update & Increment (WEB)

Suraj975 — Sat, 15 Aug 2020 08:41:23 +0000

Firebase offers a well-structured document for database CRUD operations in several languages. However, I feel some areas still require a more detailed explanation like updating a nested document in firebase, incrementing value without sending unnecessary API calls.

How to update a nested key?

const data = {
  carName:"BMW",
  color:"red",
  parts:{
    engine:{
    brand:"BMW",
    type:"alloy"
  },
  tyre:"MRF",
  visits:0,
}

const db = firebase.firestore();

So in case1, updating at level 1 is pretty straightforward. Only the key that needs to be updated is to be mentioned in the update part.

// Case 1:

//updating data at the first level of object
db.collection("collection name").doc("doc").update({
    color:"white"
})

In Case2, in order to update the nested object, we need to concatenate the key names in the row.

//case 2:

//updating data at second level

db.collection("collection name").doc("document name").update({
    [`parts.tyre`]:"Apollo"
});

//For updating nested object with dynamic key

const dynamicValue = "tyre";
db.collection("collection name").doc("document name").update({
    [`parts.${dynamicValue}`]:"Apollo"
});

// In order to update the keys of engine nested in parts of the data object, just need to concatenate. 

db.collection("collection name").doc("document name").update({
    [`parts.engine.brand`]:"Apollo"
});

How to increment a key without making unnecessary API calls?

One of the most common challenges faced in firebase is correctly incrementing the value of the document or of multiple documents when the number of users is simultaneously updating data. For example, incrementing or decrementing the number of likes on-page.

Last year, Firebase came up with a new feature FieldValue.increment that has reduced the overall complexity of getting the values from the doc and updating it.

const db = firebase.firestore();
const increaseValue=firebase.firestore.FieldValue.increment(1);
//For the above example
db.collection('collection name').doc('document name');.update({ visits: increaseValue });

Conclusion

Hopefully, this post has helped you with a better understanding on updating the nested object and firebase increment part.

Monaco Vs CodeMirror in React

Suraj975 — Sun, 09 Aug 2020 14:57:37 +0000

I have been practicing a lot of algorithms problems to prepare for job interviews and found that there was no specific tool where I can store my code topic wise and edit it later. So I created a website for it [https://www.codingnotesonline.com/].

To create this web tool, I tried two javascript-based code editors (codeMirror & Monaco) and will be talking about things that worked for me, and maybe it helps you too in your project.

Monaco
It is among the top editors which you can use in your react project and also the editor that powers the famous VS code.

Basic Code Syntax



import React, { useState } from "react";
import Editor from "@monaco-editor/react";

function App() {
  const [theme, setTheme] = useState("light");
  const [language, setLanguage] = useState("javascript");
  const [isEditorReady, setIsEditorReady] = useState(false);

  function handleEditorDidMount() {
    setIsEditorReady(true);
  }

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }

  function toggleLanguage() {
    setLanguage(language === "javascript" ? "python" : "javascript");
  }

  return (
    <>
      <button onClick={toggleTheme} disabled={!isEditorReady}>
        Toggle theme
      </button>
      <button onClick={toggleLanguage} disabled={!isEditorReady}>
        Toggle language
      </button>

      <Editor
        height="90vh" // By default, it fully fits with its parent
        theme={theme}
        language={language}
        value={"javascript"}
        editorDidMount={handleEditorDidMount}
        loading={"Loading..."}
      />
    </>
  );
}

export default App;

Playground: [https://codesandbox.io/s/wizardly-varahamihira-zwv28?file=/src/monaco.js]
Monaco React : [https://monaco-react.surenatoyan.com/]

Advantages:

Written in Typescript
Supports several languages and themes
Auto-completion is one of the strongest tools of Monaco in comparison to other editors.
Bracket matching
Errors & warnings
Tones of editor options [https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html]
Lot of developers use VS code and choosing Monaco can help you attract such customer base due to their familiarity with the editor.

Disadvantages:

One of the major disadvantages that it does not support mobile browsers or webview apps. This was the only reason I didn't choose this editor as I wanted to convert my webpage in a mobile app using webview.

Code Mirror

Code mirror has been in the community for a long time and several versions of it have been released. There is a lot of similarity between the mirror and Monaco in terms of the options that they provide.

Basic Code Syntax



import {Controlled as CodeMirror} from 'react-codemirror2'

//Import Uncontrolled if you don't want to make any changes in the code like saving or manipulating code data.

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value});
  }} // used in controlled component

  onChange={(editor, data, value) => {
  }}
/>

Playground : [https://codesandbox.io/s/objective-keller-0w0mb?file=/src/codeMirror.js]
CodeMirror React : [https://github.com/scniro/react-codemirror2]

Advantages:

Code mirror code is clean, concise, and easy to understand. If you are looking for adding custom functionality then code mirror would be a better choice over Monaco and also supports mobile browsers.
It is used in several big projects as a dev tool for Firefox, Chrome, and Safari, in Light Table, Adobe Brackets, Bitbucket, and many others.
Other features include support of more 100 languages, various themes, split views, autocompletion and many other
[https://codemirror.net/]

Disadvantage

Written in Javascript(Type definition might not be perfect)

Several other sources where I found a comparison of code editors which could be useful in deciding the code editor as per your need

Link:[https://www.npmtrends.com/ace-code-editor-vs-codemirror-vs-monaco-editor]

Link: https://stackshare.io/stackups/codemirror-vs-monaco-editor

As per my understanding and research, there are three code editors in the market (Monaco, CodeMirror, Ace-code-editor) which are widely used. Ace-code-editor is similar to the other two in terms of features and functionality but does not support the mobile browser well.

Flutter Webview Google Sigin Issue (403)

Suraj975 — Sun, 09 Aug 2020 04:56:35 +0000

Webview has been one of the great things in-app community that has helped developers to convert a responsive website into a mobile application. And with flutter, it has reduced the time and line of codes through a simple flutter webview widget that supports both android and ios platforms.

However, when things become simple it brings issues with it, which I faced while converting my site [https://www.codingnotesonline.com/] into a mobile application using flutter.

For my site, I used firebase as a database for storing data and using social signup methods (Google, Facebook & Github).

Facebook and Github work perfectly, while for google it showed a 403 error as seen in the below pic.

To make this work you just need to add Useragent into your flutter webview widget body.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
       debugShowCheckedModeBanner: false,
      home: Scaffold(
        body:WebView(
          userAgent: "random", //Add this to resolve issue
          initialUrl: 'https://your-url/',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

I hope this helped you and saved a lot of your time finding the solution for it. I will keep you guys posted with other issues such as share options in flutter webview.