DEV Community: Kamal Nayan

LoyaltyRoller: Zapier Automation of sending NFTs to users on sucessful Stripe payments using Owl Protocol

Kamal Nayan — Fri, 07 Jun 2024 23:51:42 +0000

Introduction
Owl Protocol, a web3 integration platform that simplifies blockchain development by providing APIs and Zapier integration for any EVM or Rollup. This allows developers to build blockchain applications without dealing with private keys, gas fees, or cryptocurrencies, enabling them to focus on the core aspects of their applications.

In this tutorial we will integrate automation of sending the NFTs directly to the users as soon as they complete payments using stripe , this would be made possible via zapier and owl protocol.

By combining Owl Protocol with Zapier and stripe payments, we will develop a seamless workflow that sends NFTs to the users upon sucessfull payments via stripe.

Steps

Create a Project in Owl Protocol Dashboard: Log in, set up your team, and create a new project.
Set up Your Collection: Add a custom network, configure network settings, and create your NFT collection.
Integrate Stripe and Owl protocol with Zapier: Create a new Zap, select Stripe payments as the trigger, configure NFT minting via Owl protocol in the actions, and set up the zap ⚡.
Test the Integration: Ensure everything works correctly and activate your Zap.

Owl protocol Dashboard
1) Make sure to log in at the Owl Protocol Dashboard
2)Create Team and Project: Navigate to the team section to set up your team, then create a new project.You can collaborate with others working over the same project.

3)Add Custom Network: Within your project, click on “Add Custom Network”, enter the network name, paste your RPC URL, and input the Chain ID. Also make sure to get funded using ETH or Sepolia ETH.

You can also add from default Chain IDs such as:
Ethereum (1), OP Mainnet (10), Sepolia (11155111), OP Sepolia (11155420), OP Celestia Raspberry Testnet (123420111),etc.

4)By default, your utility address will be funded with 1.45 ETH as shown below. If you need more, make sure to send additional funds to your gas tank address.

Setting Up Your Collection:
1) Enter the project you created or navigate to the previous project that you have created.

2)Create and Configure Collection: Click on “Create Collection” and fill in the Collection Name and with a Symbol, upload your image with metadata.As you can see we have created cat collection using dashboard.

Now that your collection is set up, proceed with integrating Zapier to automate the reward process for contributors.

Setting Up Zapier Integration
To set up the Zapier integration and start rewarding contributors, follow these steps:

1)Sign Up for Zapier: If you haven’t already, sign up for a Zapier account at Zapier

2)In your Zapier dashboard, click on “Make a Zap” to create a new automation.

3)Select Stripe as the Trigger App: Search for Stripe and select it as the trigger that starts our app.

4)Choose Trigger Event: Choose the trigger event which is our ‘New Payment’

5)Connect Your Stripe Account: Authenticate your Stripe account with Zapier.

6)Set Up the Trigger by adding the next step: Select the Owl Protocol

7)Click on “+” to add an action, then search for “Mint ERC721 in Owl Protocol” , choose the field Mint ERC-721.

8) Now under Action, select the collection address from the OwlProtocol Dashboard available NFT collections that you earlier created.

9) Finally, test it all Out.
This is how our flow looks like with zapier automation combining Stripe payments and Owl Protocol.

10)Now everything is ready, test the Zap to ensure everything works correctly, and test it, within a short moment you will see as shown above and if everything works perfectly then publish it.

Conclusion

The seamless integration of Stripe Payments with Zapier and Owl protocol automates the minting and distribution of NFTs, allowing developers to focus on building their applications.

Owl protocol also supports over 6000 additional web2 apps to integrate, bringing connectivity and versatility, so get started with their api documentation and dive in to onboard the next billion users to the web3 ecosystem.

Ethereum vs Bitcoin : A Deep Dive into Token Standards: ERC-20 vs. SIP-10 vs. BRC20 vs. STX20

Kamal Nayan — Fri, 23 Feb 2024 02:17:02 +0000

The world of blockchain is vast and ever-evolving, with various platforms offering unique approaches to smart contracts and tokenization.

Among these, token standards play a crucial role in defining how tokens operate within these ecosystems. This blog post explores four prominent token standards: Comparison of ETH Vs BTC token standards.

Ethereum's ERC-20, Stacks' SIP-10, Bitcoins-BRC20, and Stacks-STX20.

Understanding the Basics 🌈

Before diving into specifics, let's understand what a Token standard is.

A token standard defines a set of rules and functions that a token contract must implement to ensure interoperability within the blockchain ecosystem.

This includes how tokens are transferred, how transactions are approved, and how users can access token data.

ERC-20: The Ethereum Token Standard 🌍

Ethereum's ERC-20 is the most widely recognized token standard, serving as a blueprint for creating fungible tokens that can be traded, spent, or gifted. ERC-20 tokens share the same functionalities, making them easily exchangeable and compatible with wallet services and exchanges.

Key Functions:

transfer(address to, uint256 value): Sends a specified amount of tokens to a designated address.
approve(address spender, uint256 value): Grants permission to another account to withdraw a specified amount of tokens from the caller's account.
transferFrom(address from, address to, uint256 value): Allows a spender to transfer tokens on behalf of the token owner.

Example ERC-20 Contract:



pragma solidity ^0.8.0;

interface IERC20 {

    function totalSupply() external view returns (uint256);

    function balanceOf(address account) external view returns (uint256);

    function transfer(address recipient, uint256 amount) external returns (bool);

    // Other functions...

}

contract OurToken is IERC20 {

    mapping(address => uint256) private _balances;

    mapping(address => mapping(address => uint256)) private _allowances;

    uint256 private _totalSupply;

// Implementations of IERC20 functions...



}

SIP-10 Stacks' Approach to Fungible Tokens 🌳

SIP-10 is a fungible token standard developed for the Stacks blockchain, allowing the creation, minting, and transfer of fungible tokens. This standard is implemented through the Ordinals Protocol, enabling users to deploy token contracts and interact with fungible tokens seamlessly. SIP-10 aims to foster interoperability within the Stacks ecosystem.

Key Features

Fungibility: SIP-10 tokens are interchangeable units with equal value, similar to traditional currencies.
Ordinals Protocol: SIP-10 leverages the Ordinals Protocol for token creation and management on the Stacks blockchain.
Simplicity: The standard offers a simplified tokenization mechanism, making it user-friendly and accessible.
Security: SIP-10 tokens benefit from the security features inherent in the Stacks blockchain, ensuring integrity and protection.

Overview

SIP-10 tokens are designed to unlock new capabilities on the Stacks network, such as their integration into decentralized finance (DeFi) protocols and various blockchain applications. The standard provides a foundation for the development of innovative financial products and services within the Stacks ecosystem.

Development

SIP-10 was introduced as an experimental standard to explore the potential of fungible tokens on the Stacks blockchain.Its creation aimed to expand the utility and versatility of the Stacks network beyond its primary functions.

Key Functions:

transfer(uint256 amount, principal sender, principal recipient, memo): Transfers tokens from one account to another.
get-balance(principal): Returns the token balance of a specific account.
get-total-supply(): Returns the total supply of the tokens.

Example SIP-10 Contract:



(define-fungible-token sip10-token)

(define-public (transfer (amount uint) (sender principal) (recipient principal) (memo (optional (buff 34))))

    (ft-transfer? sip10-token amount sender recipient))

Future Prospects

As more projects adopt the SIP-10 standard, it is expected to foster innovation and drive the growth of decentralized applications (dApps) and financial instruments within the Stacks ecosystem. The continuous evolution of SIP-10 features will likely attract developers and users, enhancing its adoption and utility over time.

BRC20: Bitcoin's Programmable Tokens 🚀

🚀 BRC-20 tokens are programmable tokens built on the Bitcoin blockchain, introducing new functionalities beyond simple Bitcoin transactions.

BRC-20 Token Standard

BRC-20 is an experimental token standard developed for the Bitcoin blockchain, enabling the deployment, minting, and transferring of fungible tokens through the Ordinals Protocol. This standard leverages Ordinals inscriptions of JSON data to implement token contracts, allowing users to create, mint, and exchange BRC-20 tokens.

Key Features

Experimental: BRC-20 is still under development and testing, making predictions about its long-term success uncertain.
Fungibility: Like traditional currencies, BRC-20 tokens are interchangeable and indivisible units.
Simplicity: Compared to other token standards, BRC-20 avoids complex smart contracts, making it simpler to use.
Security: BRC-20 benefits from the robust security measures of the Bitcoin blockchain, such as its decentralized structure, algorithmic technologies, and proof-of-work consensus mechanism.
No Smart Contract Functionality: Unlike other token standards, BRC-20 does not support smart contracts, limiting its capabilities in areas such as automation, transparency, security, and asset management.
Limited Interoperability: BRC-20 tokens do not interact well with other blockchains, reducing their versatility.

History and Development

Created by an anonymous developer named Domo, BRC-20 was introduced on March 9, 2023. Since then, it has gained traction among various decentralized finance (DeFi) projects and has been adopted by infrastructure providers offering platforms for creating and trading BRC-20 tokens.

Use Cases

BRC-20 tokens have been utilized in a wide array of applications, including DeFi protocols and blockchain games. They have also been employed in non-fungible token (NFT) markets, where they serve as a means of payment or as part of NFT collections themselves.

Challenges and Risks

Despite the excitement surrounding BRC-20, the standard faces challenges related to its immature stage, lack of smart contract functionality, and limited interoperability. Investors and users must exercise caution while dealing with BRC-20 tokens until the standard becomes more established and reliable.

In summary, BRC-20 presents an innovative opportunity to expand the functionalities of the Bitcoin blockchain but requires careful consideration given its experimental nature and associated risks.

STX20: Inscribing the Future on Stacks 🌟

STX20 tokens are a new fungible token standard on the Stacks network, inspired by the BRC20 token standard on Bitcoin.

These tokens are created through the STX20 protocol, allowing for the creation and distribution of fungible, on-chain tokens on Stacks by inscribing data onto individual STX tokens.

The STX20 protocol leverages the transaction memo field to provide a more efficient and gas-saving alternative to traditional smart contracts for specific use cases on Stacks.

The STX20 protocol is designed to embed crucial protocol information within the metadata of STX token transfers, enhancing efficiency and making it an attractive choice for developers seeking straightforward solutions for their applications. By optimizing within the 34-symbol limit of the Stacks Blockchain, STX20 sets a new standard for maximizing impact with minimal footprint.

In summary, STX20 tokens represent a significant advancement in creating and sharing digital artifacts on Stacks, with impressive transaction numbers since their launch. The protocol's integration with the Stacks blockchain and commitment to efficiency make it promising for developers seeking practical solutions in decentralized applications around Bitcoin.

References:
[1] https://stacks.org/stx20-bitcoin-l2s
[2] https://www.xverse.app/blog/what-are-stx20-tokens
[3] https://stx20.com
[4] https://www.altcoinbuzz.io/cryptocurrency-news/stx-20-tokens-inscriptions-on-stacks/
[5] https://coingape.com/education/brc-20-know-everything-about-this-new-development-by-bitcoin/
[6] https://academy.binance.com/en/glossary/brc-20-tokens
[7] https://cointelegraph.com/learn/what-is-a-brc-20-token-standard-an-overview
[8] https://github.com/stacksgov/sips/blob/main/sips/sip-010/sip-010-fungible-token-standard.md

Exploring Union Protocol: Revolutionizing Credit and DeFi

Kamal Nayan — Tue, 29 Aug 2023 21:47:18 +0000

Embarking on my journey into the realm of Web3 and blockchain's vibrant landscape, I stumbled upon an awe-inspiring concept that had me immersed from the outset.

The topic at hand? None other than Union Protocol, a visionary force aimed at reshaping credit systems within the brave new world of DeFi.

As a newcomer to the world of blockchain, you may find the idea of Union Protocol intriguing – a bridge connecting traditional credit systems with the revolutionary technology of blockchain.

In this narrative, I aim to distill the essence of Union Protocol's innovative approach to credit, making it comprehensible to newcomers like mys

Introduction:
In the rapidly evolving landscape of blockchain and decentralized finance (DeFi), Union Protocol emerges as a groundbreaking initiative that seeks to redefine the concept of credit within the digital realm.

This blog aims to provide an in-depth overview of Union, shedding light on Union Protocol's significance and the challenges it aims to address.

Traditional Credit vs. Collateral-Based Lending:
The fundamental idea behind Union Protocol – the replication of the traditional credit system on the blockchain. Much of DeFi currently relies on collateral-based lending, Union Protocol aims to incorporate credit scoring into the ecosystem. This distinction is crucial as it addresses the limitations of collateral-based loans, where borrowers need to possess sufficient collateral to access funds. Union Protocol's approach focuses on unsecured lending, which can significantly enhance liquidity and accessibility within the DeFi space.

Challenges with Traditional Credit Systems:
There are many flaws within the traditional credit system, emphasizing issues such as algorithmic bias and opacity in credit score calculations. Union Protocol aims to eliminate these drawbacks by introducing a network-based trust system that utilizes on-chain addresses as identifiers. This innovative approach minimizes the need for personal information while enabling communities to extend trust and credit among members.

Union Protocol's Features and Benefits:

I would like to highlight its open nature, efficiency, and community-driven governance. Union Protocol's documentation website, although a work in progress, outlines the protocol's functioning, relationships, and use cases. Notably, Union Protocol's approach to efficiency is explored – the pooling of capital and extension of credit to multiple parties, enhancing capital efficiency.

Unsecured Lending and Trust Networks:
One of the most intriguing aspects of Union Protocol is the concept of trust networks. Union Protocol enables members to vouch for one another, establishing a network of trust that underpins credit extension. This unique approach has the potential to empower communities worldwide, irrespective of traditional credit metrics. Additionally, the protocol's focus on relationships, such as one-to-one and many-to-many, presents novel opportunities for credit extension and collaboration.

Conclusion:
Union Protocol's aspiration to introduce credit and unsecured lending into the blockchain realm has the potential to revolutionize DeFi by increasing accessibility, liquidity, and trust. Through its innovative approach to credit extension, Union Protocol aims to address the shortcomings of traditional credit systems while fostering financial inclusion and collaboration within the DeFi landscape. As Union Protocol continues its journey, it will be fascinating to witness how this groundbreaking concept unfolds and impacts the broader blockchain ecosystem.

Deployed my IdentityVerse Chain (Arbitrium Orbit Chain)

Kamal Nayan — Mon, 28 Aug 2023 19:00:45 +0000

This resulted in running these containers

Blockscout running on localhost:4000

Working with LensOracle and Phat Contracts

Kamal Nayan — Sun, 27 Aug 2023 23:16:04 +0000

# Building Delightful Front-End Applications for Tezos with Taquito and Beacon Wallet 🚀

Kamal Nayan — Mon, 24 Jul 2023 05:01:14 +0000

Mastering wallet connectivity and interactions is at the ❤️ of creating vibrant front-end applications on the Tezos blockchain. However, the available documentation often leaves developers in the lurch due to a lack of practical examples or real-world use cases. Don't sweat, we're here to change that! 🛠

In this exciting post, we'll take a deep dive into the seamless process of managing Beacon wallet connectivity using the Taquito library for Tezos. The Taquito library is a developer's best friend when it comes to interacting with the Tezos blockchain, making it super easy to send transactions or read contract data. 📚

A Brief on Beacon Wallet and Taquito 🎯

Before we put on our coding hats, let's brush up on Beacon Wallet and Taquito.

Beacon Wallet is a dapper browser extension that unlocks the potential for dApp users to interact with the Tezos blockchain. It helps users keep a tab on their XTZ (Tezos' native currency) and other Tezos-based tokens, send transactions, and engage with smart contracts in an effortless way.

On the other side of the spectrum, we have Taquito. Taquito is an elegant TypeScript library suite that adds oodles of ease to DApp development on the Tezos blockchain. It works as an efficient interaction layer between your application and a Tezos node.

The Blueprint of Our Project 🏗

Our sample application will be a combo of a simple navigation bar and a main component. We'll use a utility file named wallet.js stored inside a "utils" folder to manage wallet handling information.

This wallet.js file will be the core of our utility functions and house the preferred network and RPC URL for the Beacon Wallet instance.

Navigating Wallet Connectivity 🧭

The wallet.js utility file will be the backbone for several functions, including:

Connect Wallet: This method rolls out the red carpet and sets the active account if it doesn't exist. If the user refreshes the page, the status will still hold strong. This magic is performed using the requestPermissions method provided by the BeaconWallet instance and getActiveAccount to check for an active account.
Disconnect Wallet: We provide an easy exit strategy with a method to disconnect the wallet using the disconnect method provided by the BeaconWallet instance.
Check If Wallet Connected: This method keeps an eye out for an active wallet connection and returns the status and error information accordingly.

// wallet.js
import { TezosToolkit } from "@taquito/taquito";
import { BeaconWallet } from "@taquito/beacon-wallet";
import config from "../config";

const preferredNetwork = "hangzhounet";
const options = {
  name: "NFT",
  iconUrl: "https://tezostaquito.io/img/favicon.png",
  preferredNetwork: preferredNetwork,
};
const rpcURL = "https://hangzhounet.smartpy.io";
const wallet = new BeaconWallet(options);

const getActiveAccount = async () => {
  return await wallet.client.getActiveAccount();
};

const connectWallet = async () => {
  let account = await wallet.client.getActiveAccount();

  if (!account) {
    await wallet.requestPermissions({
      network: { type: preferredNetwork },
    });
    account = await wallet.client.getActiveAccount();
  }
  return { success: true, wallet: account.address };
};

const disconnectWallet = async () => {
  await wallet.disconnect();
  return { success: true, wallet: null };
};

const checkIfWalletConnected = async (wallet) => {
  try {
    const activeAccount = await wallet.client.getActiveAccount();
    if (!activeAccount) {
      await wallet.client.requestPermissions({
        type: { network: preferredNetwork },
      });
    }
    return {
      success: true,
    };
  } catch (error) {
    return {
      success: false,
      error,
    };
  }
};

export {
  connectWallet,
  disconnectWallet,
  getActiveAccount,
  checkIfWalletConnected,
};

The navbar is a component that displays connectivity to the wallet and allows users to connect or disconnect their wallet.

// Navbar.jsx
import "../index.css";
import {
  connectWallet,
  getActiveAccount,
  disconnectWallet,
} from "../utils/wallet";
import { useEffect, useState } from "react";

export default function Navbar() {
  const [wallet, setWallet] = useState(null);

  const handleConnectWallet = async () => {
    const { wallet } = await connectWallet();
    setWallet(wallet);
  };
  const handleDisconnectWallet = async () => {
    const { wallet } = await disconnectWallet();
    setWallet(wallet);
  };

  useEffect(() => {
    const func = async () => {
      const account = await getActiveAccount();
      if (account) {
        setWallet(account.address);
      }
    };
    func();
  }, []);

  return (
    <nav className="bg-gray-800 h-14 flex items-center px-10 justify-between">
      <div className="flex-1 space-x-4">
        <a href="#!" className="font-bold text-white pr-6">
          ICON HERE
        </a>
        <a
          href="#!"
          className="bg-black text-gray-200 px-4 py-2 text-sm font-semibold rounded-sm"
        >
          Home
        </a>
        // other navigation links...
      </div>
      <div>
        <button
          onClick={wallet ? handleDisconnectWallet : handleConnectWallet}
          className="bg-red-500 px-6 py-2 rounded-sm text-xs font-semibold text-white cursor-pointer"
        >
          💳{" "}
          {wallet
            ? wallet.slice(0, 4) +
              "..." +
              wallet.slice(wallet.length - 4, wallet.length)
            : "Connect"}
        </button>
      </div>
    </nav>
  );
}

Use Cases 💡

The amalgamation of Taquito and Beacon Wallet is perfect for a variety of Tezos dApp development scenarios. For example, if you're looking to create an NFT marketplace, these tools provide an incredibly efficient way to handle user wallet interactions, including minting, buying, and selling NFTs.

In DeFi projects, Taquito and Beacon Wallet can manage complex interactions involving staking, swapping tokens, providing liquidity, and more. They ensure these transactions are secure, reliable, and user-friendly.

Similarly, for a gaming dApp on Tezos, these tools can enable in-game purchases, reward distribution, and asset management with extreme ease and efficiency. The possibilities are truly endless! 🌈

Conclusion 🏁

To sum it up, the dynamic duo of Taquito and Beacon Wallet offers an incredibly intuitive way to handle wallet connectivity and interactions in Tezos dApps. By leveraging these libraries, you can not just build, but build better on the Tezos blockchain. 🎢

While this blog post has zoomed in on a specific use case, it is merely the tip of the iceberg. You can expand this foundation to meet more complex requirements in your Tezos dApp development journey. Buckle up, because it's time to turn those innovative ideas into reality on the Tezos blockchain! 🚀

Tezos Connecting contracts to Frontend

Kamal Nayan — Mon, 24 Jul 2023 04:55:52 +0000

Unlocking the Power of Smart Contracts on Tezos with Taquito.js

Interacting with smart contracts on blockchain networks such as Tezos presents a plethora of opportunities. However, for the average user, the process can seem daunting. While developers can interact with smart contracts and check entry points via platforms like Better Call Dev or TzKT, regular users may find this challenging. Most users are only familiar with front-end UI, making the technical aspects of smart contracts hard to comprehend.

Introducing Taquito.js

Fortunately, a solution exists in the form of Taquito.js. This JavaScript library simplifies the process of reading data from the Tezos blockchain and interacting with smart contracts. It offers a user-friendly alternative to the traditionally complex Michelson expressions.

With Taquito.js, developers can effortlessly read smart contract storage, interact with contracts, and send transactions to the blockchain node. The library stands out for its intuitive interface and ease of use.

Taquito.js in Action

The potential of Taquito.js is demonstrated in a practical setting. By creating a contract instance, calling smart contract methods, and sending transactions, developers can leverage Taquito.js to streamline their work and enhance the outcome.

Building a User-Friendly Interface

The focus then shifts to the front-end development of a lottery smart contract, demonstrating how to establish a connection to a public testnet (Ghostnet) using React and TypeScript. The integration of a wallet using Temple Wallet further simplifies the process. A user-friendly interface with easy options to buy tickets and end the game enhances the user experience.

Later in the tutorial, an active account is fetched using Taquito's Beacon wallet functionality. This straightforward operation exemplifies the practicality and utility of Taquito.js.

Enhancing Smart Contract Interaction

As the tutorial progresses, the capabilities of Taquito.js become even more apparent. The library can be utilized to interact with the lottery smart contract, allowing developers to create a contract instance, call the "buy ticket" entry point, and send a transaction to the Tezos blockchain.

Importantly, the tutorial also addresses the user experience aspect, demonstrating how loading state management can keep users informed during transaction processing. Alerts indicating successful transactions or failures further enhance this experience.

Implementing and Improving the Lottery Contract

Moving beyond the theory, the tutorial demonstrates the practical application of a lottery contract. The processes of fetching contract storage using Taquito and the Tezos API, displaying remaining tickets, and managing ticket purchases are all covered. Confirmation pop-ups following ticket purchases improve the user experience and ensure clarity throughout the process.

The tutorial culminates with the game's conclusion, displaying the balance received by each winning ticket holder and signifying the successful implementation of the lottery contract.

Looking to the future, the presenter explores potential improvements, discussing the potential for implementing multiple ticket buying functions, recording previous winners, and the prospect of incorporating dynamic NFTs, burn functionality, and FA1.2 token integration.

Moving Forward

In summary, Taquito.js is an innovative and user-friendly tool that simplifies interactions with smart contracts on the Tezos blockchain. Its far-reaching potential can enhance both user experiences and developer workflows, making it a highly recommended tool for anyone venturing into the world of smart contracts and blockchain technology.

Getting started with MINA

Kamal Nayan — Wed, 05 Jul 2023 06:16:16 +0000

Unraveling the Magic of Zero-Knowledge Apps: A Step-By-Step Guide.

In the grand tapestry of blockchain technology, there's an intriguing concept that's been gaining momentum: Zero-Knowledge Proofs.

Are you fascinated by the idea, yet unsure what these 'ZK' proofs actually mean? Does the notion of building and deploying a ZK app feel daunting? Well, you're in luck! This guide is designed specifically to walk you through the process with step-by-step instructions.

From understanding smart contracts to deploying a ZK app using TypeScript and the Mina network, we've got you covered. Even if you're just dipping your toes into the world of blockchain technology, this comprehensive guide will take you from curious bystander to confident developer.

Let's embark on this journey together, beginning with the installation of the CLI using the command below:

npm i -g zkapp-cli

Upon confirmation, your adventure into the world of ZK apps begins.

You can choose any but here we will choose Nextjs as Its our fav ❤️

choose the subsequent options and soon we will have our App ready 🔰

Soon we will see two folders generated, one is for ui and the other for contract.

Let's take a quick look at one of the contracts 🕵🏻

The Contracts mostly lie in the src/ folder

The "Add.ts" file represents the default smart contract that is generated. It contains TypeScript code and describes a simple smart contract that initializes a value (in this case, 1) and provides a method to update that value by adding 2 to it. The "interact.ts" file is a sample script that shows how to interact with the smart contract and generate zero-knowledge proofs.

Lets take in a quick code look at it 👁️👁️
L63 says await Add.compile(); which means its compiling our Add contract.

try {
  // call update() and send transaction
  console.log('build transaction and create proof...');
  let tx = await Mina.transaction({ sender: feepayerAddress, fee }, () => {
    zkApp.update();
  });
  await tx.prove();
  console.log('send transaction...');
  sentTx = await tx.sign([feepayerKey]).send();
} catch (err) {
  console.log(err);
}
if (sentTx?.hash() !== undefined) {
  console.log(`
Success! Update transaction sent.

Above code is simple Typescript but essentially what it does is it executes a transaction by calling the update() function of the zkApp object. It then builds a transaction, creates a proof, and sends the transaction using the Mina blockchain network.

The code first logs a message indicating that it is building the transaction and creating a proof. It then calls the update() function within the transaction context.

If the transaction and proof creation are successful, the code signs the transaction with the feepayerKey and sends it.

Any errors that occur during the process are caught and logged to the console.

After sending the transaction, the code checks if the transaction hash exists (sentTx?.hash() !== undefined). If it does, it logs a success message indicating that the update transaction was sent successfully.

Thats it 😄 We are now good to go and deploy our zk-app

Zero-knowledge proofs consist of two parts: the prover and the verifier. The prover generates the proof, and the verifier checks the validity of the proof. In the context of blockchain, zero-knowledge proofs are used to verify computations in a decentralized way. Mina's zero-knowledge proof system relies on the Mina cryptocurrency.🤯

To deploy the ZK app, you need to set up a network configuration using the ZK command.

You can set the config like me, we would be using the berkley testnet for deploying our contract.

Open your Aura Wallet and set the network to Berkeley

To obtain test Mina coins by visiting a faucet URL which will provide you with a transaction that confirms your address and gives you some test Mina.

You will obtain a transaction hash like this - https://berkeley.minaexplorer.com/transaction/5JtZVHUWNvTDkWcwMjSMdUsKKYhvKrhE46Sm24HDDSzgWUJYYRBd

Once your network configuration is set up, you can deploy your ZK app by using the ZK deploy command and specifying the name of the configuration.

zk deploy mina-testnet

As you would notice that a verification key would be generated ,

It would ask you to confirm the txn similar to below

After a successful deployment, you will receive a transaction hash and a verification key hash.

The verification key is used to identify the deployed account as a ZK app verifier. This key is crucial for verifying zero-knowledge proofs.

I have taken 2 images from MINA Docs representing the Verifier and Prover Function Working 🕵🏻

The prover takes inputs and produces zero-knowledge proofs, which can be sent to the verifier on the blockchain network.

And there you have it! 🎉🎉

You've walked through the winding paths of blockchain technology and emerged with a deeper understanding of zero-knowledge proofs and the power they hold. Remember, every expert was once a beginner, and you've just taken significant strides on your journey to mastery. Keep experimenting, keep learning, and most importantly, keep building amazing ZK apps !!

Metamask Snaps

Kamal Nayan — Wed, 05 Jul 2023 03:41:46 +0000

What is Metamask ??

MetaMask is one of the most popular wallets for interacting with the Ethereum blockchain.

Who needs Metamask ?

Introducing MetaMask Snapps: A New Way to Extend the Functionality of MetaMask 🚀

With its code open Sourced and its SDKs available now it’s becoming an extensible platform for permissionless innovation with the introduction of MetaMask Snapps.

Snapps, or “snaps,” are plugins that allow developers to extend the functionality of MetaMask, bringing new features and APIs to the wallet. 🔌

With Snapps, developers can go beyond Ethereum and integrate any blockchain protocol, scaling solution, or API into MetaMask. Snapps can also be used to enable authentication, privacy, and consent in ways that keep users in control. Additionally, developers can use Snapps to empower users with more ways to protect their data and employ anti-phishing solutions. 🔒

Snapps execute in a sandboxed environment based on Hardened JavaScript by Agoric and use a permissions model for protecting user data and respecting user consent. To try Snapps, developers can install MetaMask Flask, a canary distribution that provides access to upcoming features. 🐦

A snap is a JavaScript program that runs in an isolated environment and customizes the wallet experience. Snaps have access to a limited set of capabilities determined by the permissions granted by the user during installation. With a snap, developers can add new API methods to MetaMask, add support for different blockchain protocols, or modify existing functionalities using the Snaps JSON-RPC API. 💻

Some of the features that can be added using Snapps include dialogs, notifications, encrypted storage, non-EVM chain support, transaction insights, cron jobs, custom UIs, and network access. 🔔

Here is a beautiful resource to help you get started with Metamask Snapps ❤️ https://docs.metamask.io/snaps/get-started/quickstart/

How do you set up .env variables in your NextJS project ?

Kamal Nayan — Fri, 28 Apr 2023 06:39:42 +0000

First, ensure that the .env file is located in the root directory of your Next.js project.
Make sure you have installed the required dependencies. You can use the dotenv package to load environment variables from the .env file. Run the following command to install it:

npm install dotenv

Create a file named next.config.js in the root directory of your project if it doesn't exist already. In that file, add the following code

require('dotenv').config();

module.exports = {
  env: {
    INFURA_IPFS_ID: process.env.INFURA_IPFS_ID,
  },
};

This configuration will load the INFURA_IPFS_ID environment variable from the .env file and make it accessible in your Next.js app.

congratulations now you are good to go 🚀

After following these steps, you should be able to access the INFURA_IPFS_ID variable using process.env.INFURA_IPFS_ID in your code, just like you are doing with the projectId variable.

How to easily apply gradient effect in tailwindcss

Kamal Nayan — Thu, 20 Apr 2023 05:22:40 +0000

Gradient effects 🧊 are a popular design trend that add depth and interest to websites and applications. With Tailwind CSS, you can easily apply gradient effects to any element using the built-in gradient utilities.

While It is always good to follow the official docs for reference

https://tailwindcss.com/docs/gradient-color-stops

In this blog post, I will show you how to apply gradient effects to your website using Tailwind CSS.

Step 1: Install Tailwind CSS

If you haven't already, you'll need to install Tailwind CSS by following the instructions on their website or using your preferred package manager. Once you have Tailwind CSS installed, you can start using the gradient utilities.

Step 2: Choose a gradient color scheme

There are many different gradient color schemes to choose from, ranging from simple two-color gradients to more complex multi-color gradients. You can choose from pre-defined gradients in Tailwind CSS or create your own custom gradient.

To choose a pre-defined gradient, you can browse the Tailwind CSS documentation and find the gradient utility that matches your desired color scheme. For example, if you want a blue to purple gradient, you can use the "bg-gradient-to-r" utility:

This will create a gradient background that fades from blue to purple from left to right.

Step 3: Adjust gradient direction and color stops

You can adjust the direction of the gradient using the "bg-gradient-to-" utility followed by a direction keyword. For example, if you want a gradient that fades from top to bottom, you can use the "bg-gradient-to-b" utility:

<div class="bg-gradient-to-b from-blue-500 to-purple-500">
  <!-- your content here -->
</div>
You can also adjust the color stops of the gradient by using the "via-" keyword followed by a color. This allows you to create more complex multi-color gradients. For example, if you want a gradient that fades from blue to green to purple, you can use the following utility:

<div class="bg-gradient-to-r from-blue-500 via-green-500 to-purple-500">
  <!-- your content here -->
</div>
This will create a gradient that fades from blue to green to purple from left to right.

Step 4: Use gradient with other Tailwind CSS utilities

You can also use gradient utilities in combination with other Tailwind CSS utilities, such as text and border utilities. For example, you can create a button with a gradient background and a border using the following code:

Click me

This will create a button with a gradient background that fades from blue to purple, a gray border, and white text.

Conclusion

Using Tailwind CSS, you can easily apply gradient effects to your website or application. By choosing a pre-defined gradient or creating your own custom gradient, adjusting the direction and color stops, and using gradient utilities in combination with other Tailwind CSS utilities, you can create beautiful and unique designs. Try experimenting with different gradients and see what works best for your project.

What is a merkle tree ?

Kamal Nayan — Thu, 20 Apr 2023 05:15:20 +0000

A block header in a blockchain typically contains the following details:

Version number: Specifies the version of the software used to create the block.

Previous block hash: A reference to the hash of the previous block in the chain, linking the blocks together.

Merkle root: A hash of all the transactions in the block, serving as a compact representation of all the transaction data in the block.

Timestamp: The time the block was created, used to help prevent double-spending and to order transactions chronologically.

Difficulty target: Specifies the target for the proof-of-work calculation, which determines the rate at which new blocks are added to the chain.

Nonce: A random number used as an input in the proof-of-work calculation, which allows miners to perform the necessary