DEV Community: Muhdsodiq Bolarinwa

The Internet Computer Protocol (ICP): A Technical Deep Dive into the World Computer

Muhdsodiq Bolarinwa — Sun, 26 Jan 2025 08:19:44 +0000

The Internet Computer Protocol (ICP) is decentralized blockchain technology, it is secure and transparent which provides an alternative to centralized internet cloud providers.

ICP maintains an independent data center that aims to bring efficient data, speed, and decentralization to computation and data storage. Internet Computer protocol uses ICP as its native cryptocurrency which is used to pay transaction fees, rewards, incentives, and other transactions. Users can build their DApps on ICP, which allows developers to write their smart contracts in different popular languages like Rust, TypeScript, or Python. The smart contract is regarded as canisters which are hosted on an ICP blockchain network called subnet.

ICP was developed by DFINITY Foundation, it structure combines advanced cryptography, novel consensus mechanisms and muddler subnet architecture to build a world computer that put stroke on traditional cloud infrastructure.

Architectural Innovation Canister Smart contract The Core concept of ICP computational units are canister smart contracts, which are compiled and bundled in WebAssembly (WASM) code.

It has the ability to hold gigabytes of memory for a low fee.
Canister pays for their own computation via ICP native token which also implements a reverse gas model where users don’t have to cover cost.
Dapp can be fully hosted on the ICP blockchain without relying on central cloud service.
Canisters are built to be evolving which can be upgraded

Subnet Architecture
ICP improved its scalability through subnets which makes it an independent blockchain running parallel asynchronous communication via cross-subnet (XNET) messaging.

Subnet operates as a replicated machine with Byzantine Fault Tolerance (BFT)
It is capable of handling complex DApps such as on-chain AI models and hosting hundreds of gigabytes of data.
It generates new subnets to avoid bottlenecks that occur in monolithic blockchains Chain-Key Cryptography ICPs adopt cryptography innovation to ensure seamless subnet management such that
This cryptography innovation allows multiple message signing without exposing individual node keys.
Nodes can decide to leave or join subnets without obstructing other nodes' operation.

Features

Reverse Gas Model
ICP offers pre-fund canisters that allow developers to build DApp that users can interact with without paying a gas fee. This eliminates gas fees allows users to get onboard on the blockchain, and encourages mass adoption.

EVM Compatible via Bitfinity

ICP is a layer 2 EVM blockchain solution that is built on the Ethereum blockchain while leveraging ICPs’s Scalability.

In conclusion, ICP blockchain has been redefining the internet stack while offering a scalable, secure, and developer/user-friendly platform to get more users onboard. we have different Real cases such as DEFi, NFTs & Gaming, Decentralised AI, Domain, and others.

Mantle Network: The Next Evolution in Ethereum Scalability

Muhdsodiq Bolarinwa — Sat, 25 Jan 2025 21:44:35 +0000

Mantle Network is an EVM-compatible Layer 2 blockchain built on the Ethereum blockchain, It uses optimistic Rollup technology to increase transaction speed and lower gas fees compared to the Ethereum mainnet.

Did you know Mantle is setting new standards in modular blockchain architecture?

Mantle network is the next powerful scalable and secure network. It adopt module rollups which effectively reduce transaction cost. The blockchain architecture setup standard benchmark for Layer 2 solution with it well structured ecosystem

Mantle is set to improve and focus on scalability and security. It is built to scale up Ethereum while improving transaction speed and maintaining Ethereum security. It settles transactions off-chain before proceeding to settle it on-chain and maintain the integrity of the chain. It adopts MNT as the native token for Mantle, which is used to settle transaction fees.

The Native MNT Token:

MNT is serve as the native token for Mantle:

Transaction Fee payment: For every transaction on the chain MNT is used to settle transaction fee.
Mantle Network Governance: it is adopted for governance participation or any activities to upgrade protocol governance.
Ecosystem Incentives: MNTs are used to settle rewards for staking, contribution, and liquidity provision.

Why mantle? Let’s break it down.

Lightning-Fast Transaction: It gives you access to zoom through transactions like a superhero on a rescue mission.
User-Friendly Fee: You can keep your crypto in your wallet and move it around your desire that won’t make you gasp.
Fort Knox Security: you can take a nap knowing your assets are safer than a dragon’s treasure hoard.

Why You’ll love Mantle(Even your Kids Get It)?

For Noobs: Connect your wallet with ease just like using your debit card.
Build Your Dapps: Develop your scalable DApp on Mantle to onboard more users to your DApp with less transaction fee, It supports Game, NFT, DeFi, AI x Blockchain project.
Connect With Mantle: A solution community driven providing substantial

https://www.mantle.xyz/
Join the Mantle community and help shape the future of decentralized innovation.

Introduction to Mina Protocol: Mina Protocol Vision and Its Role in Web3

Muhdsodiq Bolarinwa — Wed, 18 Dec 2024 21:08:38 +0000

As the blockchain industry matures, the shift toward Web3—a decentralized internet where users retain control of their data and identity—is accelerating. The Mina Protocol, with its lightweight blockchain architecture, emerges as a groundbreaking solution to the technical and ethical challenges facing Web3 development. By leveraging cutting-edge cryptographic techniques and focusing on minimalism, Mina aims to redefine blockchain scalability, privacy, and accessibility.

The Vision of Mina Protocol

At the core of the Mina Protocol is a vision to build a blockchain that is lightweight, decentralized, and inclusive. Mina envisions a Web3 ecosystem where users, regardless of their technical expertise or hardware limitations, can interact with blockchain networks seamlessly.

The guiding principles of Mina’s vision include:

Accessibility By reducing the resource requirements to run a full node, Mina enables users to run nodes or low-powered device to participate fully in the network. This eliminates centralization risks caused by resource-intensive blockchains that often require expensive hardware. This makes Mina more decentralized in nature.
*Privacy by Default Mina integrates Zero-Knowledge Proofs (ZKPs) * to allow for private transactions and interactions while maintaining transparency and trust in the system. This privacy-first approach aligns closely with Web3’s goal of empowering users to control their data. People can build private protocol on Mina
Decentralization at Scale
Traditional blockchains struggle to balance scalability with decentralization. Mina’s succinct blockchain size, fixed at ~22 kilobytes, ensures that decentralization remains intact as the network grows.
Developer Empowerment Through the introduction of Snapps (SNARK-powered applications), Mina enables developers to build decentralized applications (dApps) that prioritize privacy, efficiency, and user control, paving the way for transformative Web3 solutions.

Technical Foundations of Mina Protocol
The Mina Protocol is built on a series of innovative technologies that set it apart from traditional blockchains. These include:

zk-SNARKs: The Backbone of Mina Zero-knowledge succinct Non-Interactive Arguments of Knowledge (zk-SNARKs) are cryptographic proofs that allow one party to prove the validity of information without revealing the information itself. Mina uses zk-SNARKs to compress its blockchain into a constant size, representing only the current state of the ledger rather than the entire transaction history. This approach reduces the storage and computational requirements for participants, allowing Mina to remain lightweight and scalable.
Ouroboros Samasika Consensus Mechanism
Mina employs a variant of Proof-of-Stake (PoS) known as Ouroboros Samasika, specifically tailored for succinct blockchains. This consensus algorithm is efficient and secure, ensuring that Mina maintains its fixed size while supporting high throughput and scalability.
Snapps: Privacy-Powered dApps
Snapps are Mina’s innovative take on decentralized applications. These applications utilize zk-SNARKs to offer unique advantages:
Privacy: Users can interact with Snapps without exposing sensitive data.
Efficiency: Snapps require minimal computational resources, making them ideal for lightweight devices.
Scalability: Unlike traditional dApps, Snapps do not add computational strain on the network.

Mina Protocol in the Web3 Ecosystem
Mina Protocol plays a pivotal role in realizing the ideals of Web3 by addressing critical challenges that hinder its widespread adoption.

Decentralized Identity Management One of the foundational goals of Web3 is enabling users to own and control their digital identities. Mina’s zk-SNARKs technology allows for secure, private, and verifiable identity credentials. For example, users can prove they meet certain requirements (e.g., being over 18 or holding a valid license) without revealing their personal information. This opens the door for decentralized identity solutions in areas such as:
Online authentication
Voting systems
Access control for dApps and services
Scalable and Energy-Efficient Infrastructure
Web3 needs scalable infrastructure to support billions of users without compromising decentralization or energy efficiency. Unlike energy-intensive Proof-of-Work (PoW) systems, Mina’s PoS-based model consumes minimal energy. Its fixed blockchain size ensures that Mina remains lightweight and can be run on everyday devices, making it scalable for a global audience.
Privacy-Preserving Data Applications
In Web3, users demand privacy in their online interactions. Mina’s Snapps enable the creation of privacy-preserving applications for:
Decentralized finance (DeFi)
Health data sharing
Supply chain management
For instance, a DeFi Snapp could allow users to prove their creditworthiness without exposing their financial history.
Democratizing Blockchain Participation
Many Web3 platforms struggle with accessibility due to their technical complexity or hardware requirements. Mina lowers the barrier to entry by enabling anyone to run a full node with minimal resources. This democratization aligns with the ethos of Web3: an open, inclusive, and decentralized internet.

Opportunities
The rise of Web3 presents numerous opportunities for Mina:

Partnerships: By collaborating with other Web3 projects, Mina can extend its ecosystem and showcase its potential.
DeFi Integration: Privacy-preserving DeFi applications are in high demand, and Mina is well-positioned to lead in this space.
Broader Adoption: As users demand greater control over their data and privacy, Mina’s lightweight and user-centric approach will likely gain traction.

Conclusion
Mina Protocol is more than just a blockchain—it’s a vision for a more decentralized, private, and inclusive Web3. By leveraging the power of zk-SNARKs and maintaining its lightweight architecture, Mina addresses fundamental issues of scalability, privacy, and accessibility that plague traditional blockchains.
As the Web3 ecosystem continues to grow, Mina is poised to play a crucial role in shaping the future of decentralized applications, enabling a new era of user empowerment and control. Whether through its innovative Snapps, decentralized identity solutions, or energy-efficient design, Mina stands out as a cornerstone of the Web3 revolution.

Integrating Zksync With Particle Network

Muhdsodiq Bolarinwa — Fri, 16 Aug 2024 07:17:47 +0000

*Zksync * is a layer 2 scaling Ethereum solution that adopts ZK rollups. They help reduce the congested Ethereum network and the transaction fee on Ethereum. We will be looking at how we can integrate Social Login from the Particle network, which users will be able to connect their Dapp with social logins rather than using an external wallet, with our Next js. This allows user to access their wallet with just a simple click. User can lose their private key, and when such happens users won't be able to retrieve such accounts back.

To get started with impelement particle network social logins to leverage social logins with the Zksync blockchain so user can connect to dapp with metamask or any EAO account.

Initialized new nextjs app

npx create-next-app@latest

You can name your app particlezksync or anything of your choice
After you successfully initialize your Nextjs project. You get something like this.

Navigate to your project name directory, where you should have all your file directories such as your package.json, and src which should look like this.

cd particlezksync or your app name.

Next, you need to install some dependencies. You can use yarn or npm, depending on the package you are using to install your modules.

yarn add  @particle-network/auth-core-modal @particle-network/chains ethers @particle-network/aa

npm install @particle-network/auth-core-modal @particle-network/chains ethers @particle-network/aa

You need to created a file name .env in your project root folder,the following keys are required

NEXT_PUBLIC_APP_PROJECT_ID //You can get this from walletconnect

You will get the below keys from the Particle network dashboard.
NEXT_PUBLIC_APP_CLIENT_KEY
NEXT_PUBLIC_APP_APP_ID

Create a folder named Context in your src folder, Inside the context file, create a new file named AuthContext.jsx this is where we will handle all our authentication so we can wrap the authentication context around the application.

In AuthContext.jsx define the following code:

"use client" // directive ensures that this file is treated as a client component in Next.js.

// Importing necessary libraries and hooks from React and Particle Network SDK
import React, { createContext, useContext, useState, useEffect } from "react";
import {
  useEthereum,       // Hook to interact with Ethereum provider
  useConnect,        // Hook to manage connection to a wallet
  useAuthCore,       // Hook to access authentication core methods
} from "@particle-network/auth-core-modal";
import { ZetaChainTestnet } from "@particle-network/chains"; // Importing ZetaChainTestnet from Particle Network SDK
import { AAWrapProvider, SmartAccount, SendTransactionMode } from "@particle-network/aa"; // Tools for account abstraction and transaction management
import { ethers } from "ethers"; // Ethers.js for blockchain interactions

// Creating a context to share state across components
const SocialoginAccount = createContext();

// Main AuthContext component that wraps around child components to provide authentication-related context
export const AuthContext = ({ children }) => {
  const chain = ZetaChainTestnet.id; // Getting the chain ID of ZetaChainTestnet
  console.log(chain);

  const { provider } = useEthereum(); // Accessing Ethereum provider
  if (!provider) {
    console.error('Ethereum provider is not available.');
    return null; // Or handle this case appropriately
  }
  // Creating a SmartAccount instance for account abstraction and user operations
  const smartAccount = new SmartAccount(provider, {
    projectId: process.env.NEXT_PUBLIC_APP_PROJECT_ID,  // Project ID from environment variables
    clientKey: process.env.NEXT_PUBLIC_APP_CLIENT_KEY,  // Client key from environment variables from particle network
    appId: process.env.NEXT_PUBLIC_APP_APP_ID,          // App ID from environment variables from particle network
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ version: "1.0.0", chainIds: [chain] }], // Defining account abstraction options for the ZetaChain
      },
    },
  });

  console.log(smartAccount);

  // Wrapping SmartAccount with AAWrapProvider to enable transaction handling (e.g., Gasless transactions)
  const customProvider = new ethers.providers.Web3Provider(
    new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), 
    "any" // Network is set to "any" for compatibility
  );

  // State variables to store balance, address, and signer information
  const [balance, setBalance] = useState(null);
  const [address, setaddress] = useState(null);
  const [signer, setSigner] = useState(null);

  // Hooks for managing wallet connection and retrieving user info
  const { connect, disconnect, connected } = useConnect();
  const { userInfo } = useAuthCore();

  // Getting the signer from the customProvider
  const signerp = customProvider?.getSigner();
  console.log("signerp", signerp);

  // Effect hook that fetches balance when userInfo, smartAccount, or customProvider changes
  useEffect(() => {
    if (userInfo) {
      fetchBalance();
    }
  }, [userInfo, smartAccount, customProvider, provider]);

  console.log(userInfo);
  console.log(balance);

  // Function to fetch user's Ethereum balance and signer info
  const fetchBalance = async () => {
    const addressParticle = await smartAccount.provider.selectedAddress; // Get the selected address from the provider
    console.log(addressParticle);
    setaddress(addressParticle);
    const balanceResponseParticle = await customProvider.getBalance(
      addressParticle
    ); // Fetch balance
    setBalance(ethers.utils.formatEther(balanceResponseParticle)); // Format and set balance
    const signers = customProvider.getSigner(); // Get the signer
    console.log(signers);
    setSigner(signers); // Set the signer in state
  };

  console.log(signer, "signer");

  // Function to handle user login via social authentication
  const handleLogin = async (authType) => {
    if (!userInfo) {
      try {
        await connect({
          socialType: authType,  // Specify the social authentication type
          chain: ZetaChainTestnet,  // Specify the chain to connect to
          prompt: "select_account",  // Prompt the user to select an account
        });
      } catch (error) {
        console.log(error, "lognError"); // Handle login errors
      }
    }
  };

  // Function to execute a user operation, e.g., sending a transaction
  const executeUserOp = async () => {
    try {
      if (!signer) {
        console.error("Signer is not available"); // Ensure the signer is available
        return;
      }
      // Define a transaction object
      const tx = {
        to: "0x9dBa18e9b96b905919cC828C399d313EfD55D800", // Recipient address
        value: ethers.utils.parseEther("0.001"), // Transaction value in Ether
      };
      const txResponse = await signer.sendTransaction(tx); // Send the transaction
      const txReceipt = await txResponse.wait(); // Wait for the transaction to be mined
      console.log("Transaction receipt:", txReceipt);
    } catch (error) {
      console.error("Error in executeUserOp:", error); // Handle errors during transaction execution
    }
  };

  // Providing the context values to child components
  return (
    <SocialoginAccount.Provider
      value={{
        handleLogin,
        userInfo,
        balance,
        connect,
        disconnect,
        address,
        customProvider,
        executeUserOp,
        signer,
        signerp,
      }}
    >
      {children} {/* Render child components */}
    </SocialoginAccount.Provider>
  );
};

export default SocialoginAccount;

// Custom hook to consume the context in child components
export const useAuth = () => {
  return useContext(SocialoginAccount);
};

We will implement the AuthContext in the layout file in our src/app/layout directory, which should look like this

"use client";
// The "use client" directive indicates that this file is intended to be used as a client component in Next.js.

// Importing the Inter font from Google Fonts using Next.js built-in support.
import { Inter } from "next/font/google";
// Importing global CSS styles.
import "./globals.css";
// Importing chain configurations for ZetaChainTestnet and EthereumSepolia from Particle Network SDK.
import { zkSyncEraSepolia, zkSyncEra } from "@particle-network/chains";
// Importing AuthCoreContextProvider for providing authentication context using Particle Network SDK.
import { AuthCoreContextProvider } from "@particle-network/auth-core-modal";
// Importing a custom AuthContext from a local context file.
import { AuthContext } from "@/context/AuthContext";


// Initializing the Inter font with Latin subset, ensuring consistent typography.
const inter = Inter({ subsets: ["latin"] });

// Defining the RootLayout component, which serves as the main layout for the application.
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    // The root HTML element of the page, setting the language to English.
    <html lang="en">
      <body className={inter.className}> {/* Applying the Inter font to the entire body */}
        {/* Wrapping the application in AuthCoreContextProvider to provide authentication and wallet context */}
        <AuthCoreContextProvider
          options={{
            projectId: process.env.NEXT_PUBLIC_APP_PROJECT_ID as string || "", // Project ID for Particle Network, from environment variables
            clientKey: process.env.NEXT_PUBLIC_APP_CLIENT_KEY as string || "", // Client key for Particle Network, from environment variables
            appId: process.env.NEXT_PUBLIC_APP_APP_ID as string || "",         // App ID for Particle Network, from environment variables
            erc4337: {
              name: "SIMPLE",     // Name of the account abstraction contract
              version: "1.0.0",   // Version of the account abstraction contract
            },
            wallet: {
              visible: true,      // Indicates if the wallet should be visible
              customStyle: {
                supportChains: [zkSyncEraSepolia, zkSyncEra], // Supported blockchain networks
              },
            },
          }}
        >
          {/* Wrapping children components with custom AuthContext to manage user authentication */}
          <AuthContext>{children}</AuthContext>
        </AuthCoreContextProvider>
      </body>
    </html>
  );
}

We create a truncate address components file in a utils folder we created in the root directory of our app src/utils/truncateAddress.js

export const truncateAddress = (address) => {
    if(!address) return;
    return address.slice(0,8) + "..." + address.slice(address.length - 4, address.lenght)
}

We created a simple component named ConnectAuth.jsx to manage and display the login feature.

"use client";
// The "use client" directive indicates that this component is a client-side component in Next.js.

import React from "react";
// Importing the useConnect hook from the Particle Network SDK for managing wallet connections.
import { useConnect } from "@particle-network/auth-core-modal";

// Importing custom hooks and utilities.
import { useAuth } from "@/context/AuthContext"; // Custom hook to access authentication context.
import { truncateAddress } from "@/utils/truncateAddress"; // Utility function to truncate long Ethereum addresses.

// Define the ConnectAuth component, which handles wallet connection and displays wallet information.
const ConnectAuth = () => {
  // Destructuring properties from the useConnect hook to manage connection state and disconnect functionality.
  const { connected, disconnect } = useConnect();

  // Destructuring properties from the custom useAuth hook to handle login, display balance, address, and logout functionality.
  const { handleLogin: login, balance: balanceInfo, address, disconnect: logout, walletAddress } = useAuth();

  // Returning JSX that conditionally renders based on the connection state.
  return (
    <div>
      {connected ? (
        // If the user is connected, display the wallet information.
        <>
          <div className="dropdown dropdown-bottom dropdown-end">
            {/* Button to view wallet details */}
            <div tabIndex={0} role="button" className="btn m-1">
              View Wallet
            </div>
            {/* Dropdown menu with wallet information */}
            <ul
              tabIndex={0}
              className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
            >
              <li>
                <a>
                  {/* Display the user's balance */}
                  <p>{balanceInfo}</p>
                </a>
              </li>
              <li>
                <a>
                  {/* Display the truncated wallet address */}
                  <p>{truncateAddress(address)}</p>
                </a>
              </li>
              <li>
                <a>
                  {/* Button to disconnect the wallet */}
                  <button className="" onClick={() => disconnect()}>
                    Disconnect
                  </button>
                </a>
              </li>
            </ul>
          </div>
        </>
      ) : (
        // If the user is not connected, display options to connect with different social accounts.
        <>
          <div className="dropdown dropdown-bottom dropdown-end">
            {/* Button to initiate wallet connection */}
            <div tabIndex={0} role="button" className="btn m-1">
              Connect Wallet
            </div>
            {/* Dropdown menu with options to connect via different social platforms */}
            <ul
              tabIndex={0}
              className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
            >
              <li>
                <a>
                  {/* Button to connect using Twitter */}
                  <button className="" onClick={() => login("twitter")}>
                    Connect with Twitter
                  </button>
                </a>
              </li>
              <li>
                <a>
                  {/* Button to connect using Google */}
                  <button className="" onClick={() => login("google")}>
                    Connect with Google
                  </button>
                </a>
              </li>
              <li>
                <a>
                  {/* Button to connect using GitHub */}
                  <button className="" onClick={() => login("github")}>
                    Connect with Github
                  </button>
                </a>
              </li>
            </ul>
          </div>
        </>
      )}
    </div>
  );
};

// Exporting the ConnectAuth component as the default export.
export default ConnectAuth;

We can use the ConnectAuth component in the src/app/page.tsx

import Image from "next/image";
import ConnectAuth from "@/components/ConnectAuth"
export default function Home() {

  // const { } = useAuth()
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.tsx</code>
        </p>
          <ConnectAuth />

      </div>


      <div>
        <ConnectAuth />

      </div>
    </main>
  );
}

Omchain: Why Build Scalable DApps on Omchain's Robust Platform

Muhdsodiq Bolarinwa — Tue, 06 Aug 2024 22:07:55 +0000

What Is Omchain Blockchain?

Omchain is a layer 1 blockchain which is EVM compatible provides a decentralized, secure, high-capacity blockchain infrastructure, and promotes transparency. It facilitates low transaction fees and side-chain integrations enable highly scalable blockchain infrastructure for enterprise-grade needs.

Omchain enables secure and seamless communication such as transferring assets between other EVM blockchains and bridging assets such as Ethereum, polygon, and Avalanche without technical expertise. They support individuals, business owners, and organizations willing to bring their solutions to on-chain.

Omchain adopts proof of authority mechanism. It has the capability of smoothly processing 2000 transactions per block, which produces a block every 2 seconds, rendering over 15 million block per year. Omchain is super fast which is ideal for NFTs, Defi, because it can pull off up to 1000 transactions per second. Omchain has a fixed transaction processing fee for larger transactions which makes it suitable for economical usage.

OMC is designed as a token for gas fees for the _Omchaim _network. OMC token total supply is pegged at 250 million tokens. OMC can be bridged to other EVM networks such as Ethereum(ETH), Binance Smart Chain (BSC), Polygon (MATIC), and Avalanche (AVAX). OMC token transaction gas fees are burned permanently which helps in deflationary token economy.

Omchain blockchain Lab known as Omchain Labs serves as an educational platform for people who are looking forward to delving into Omchain blockchain. They connect the gap between relevant parties who are bridging their business solution to Omchain and provide substantial solutions and support for Omchain blockchain-backed projects. This promotes an entrepreneurial atmosphere with issues that align with the company's web3 support.

Omchain provides advanced features such as smart contracts, decentralized applications (DApps), and token contracts. Smart Contracts are self-executing digital contracts stored on blockchain which are executed when certain conditions are met. Developers have the opportunity to write and customize their smart contracts for different purposes such as NFT, DEFI, DAO, Social-fi, and automated tasks.

In conclusion, Omchain offers a robust innovation offered by blockchain and provides high performance, cross-chain compatibility, and efficient security. This is supported by and improved by the Omchain Foundation.

Web3Auth(次のjs)を使用したXRP Ledgerアカウントの作成:ステップバイステップガイド

Muhdsodiq Bolarinwa — Sun, 23 Jun 2024 14:19:20 +0000

はじめに

XRP ledgerは、国境を越えた支払いに焦点を当てた分散型ブロックチェーンであり、金融取引を文書化するために使用され、高速で低コストで効果的です。 XRP Ledgerは、Rippleの共同創設者兼CEOであるChris Larsenによって作成されました。 XRP Ledeは、そのネイティブ暗号通貨としてXRPを利用しました。

このチュートリアルでは、新しいアカウントを生成するweb3認証を使用してXRP Ledgerを実装しています。このアカウントは、取引を実行するために使用できます。これは、xrp ledgerの任意のアドレスにトークンを送信するために使用できます。ユーザーがXRBアカウントを取得するには、ユーザーはGoogle discordまたはweb3authに関連付けられた他の認証を承認する必要があります。

プロジェクトを開始するには. Nextjs、Tailwind CSS、およびその他のweb3認証ライブラリを利用します。

あなたのターミナルを開けて下さい

コードを配置するディレクトリに移動します

新しいnextjsプロジェクトを作成する

npx create-next-app@latest my-project --typescript --eslint

あなたの端末には次のようなものがあるはずです

それを正常に実装したら、my-projectに移動します

cd my-project

My-projectをcdすると、tailwind cssがインストールされます

npm install -D tailwindcss postcss autoprefixer

それが成功した後、あなたはこれを実行します

npx tailwindcss init -p

プロジェクトに利用するいくつかの依存関係をインストールする必要があります

Yarnをパッケージインストーラとして使用したり、npmなどの知っているパッケージインストーラとして使用したりします。

yarn add @web3auth/xrpl-provider @web3auth/xrpl-provider @web3auth/openlogin-adapter @web3auth/openlogin-adapter @web3auth/modal @web3auth/base @nice-xrpl/react-xrpl

インストール後、vs codeでファイルディレクトリを開くことができます

私達の開発プロセスを始めることができます

プロジェクトディレクトリにutilsフォルダとcomponentsフォルダを作成し、xrpプロバイダクライアントでweb3authログインによって生成されたアカウントを取得するなど、プロバイダーと呼び出そうとしているその他の関数を定義する必要があります。

ルートプロジェクトディレクトリでプロジェクト構造でsrcを使用している場合は、アプリまたはページフォルダー内ではなく、ルートディレクトリに作成しない場合は、utilsフォルダーを作成します。

という名前の新しいフォルダを作成します xrpLRPC.ts


//まず、typescript用のWeb3auth/baseからプロバイダータイプをインポートすることから始めます
import { IProvider } from "@web3auth/base";

// Xrp ledgerに入力を送信するために使用する関数をインポートします
import { convertStringToHex, Payment, xrpToDrops } from "xrpl"

//私たちはすべての私たちの要求を置く私たちのクラスを定義します

export default class XrplRPC {
    // IProvider型のプライベートプロバイダ変数の宣言}
    private provider: IProvider;

     //指定された引数を使用してプロバイダー変数を初期化するコンストラクターを定義します
     constructor (provider: IProvider) {
        this.provider = provider
     }

     // プロバイダに関連付けられたアカウントを取得する方法
     getAccounts = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<never, string[]>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });
            console.log(accounts, "accounts"); // Log the accounts for debugging purposes

            if (accounts) { // アカウントが返されたかどうかを確認します
                // リスト内の最初のアカウントのアカウント情報を要求する
                const accInfo = await this.provider.request({
                    method: "account_info", // アカウント情報を取得する方法を指定します
                    params: [
                        {
                            account: accounts[0], // 最初のアカウントを使用する
                            strict: false, //非strictモードでは、より寛大なアカウント情報の取得が可能になります
                            ledger_index: "current", // 現在の元帳インデックスを使用する
                            queue: true, // キューに入れられたトランザクションを含める
                        },
                    ],
                });
                return accInfo; // アカウント情報を返す
            } else {
                return "アカウントが見つかりません、問題を報告してくださ"; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.error("Error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
     };


     // 最初のアカウントの残高を取得する方法
    getBalance = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<string[], never>({
                method: "xrpl_getAccounts", // アカウントを取得する方法を指定します
            });

            if (accounts) { // アカウントが返されたかどうかを確認します
                // リスト内の最初のアカウントのアカウント情報を要求する
                const accInfo = (await this.provider.request({
                    method: "account_info", // アカウント情報を取得する方法を指定します
                    params: [
                        {
                            account: accounts[0], // 最初のアカウントを使用する
                            strict: true, // 厳密なモードは正確な記述情報を保障します
                            ledger_index: "current", // 現在の元帳インデックスを使用する
                            queue: true, // キューに入れられたトランザクションを含める
                        },
                    ],
                })) as Record<string, Record<string, string>>;
                return accInfo.account_data?.Balance; // 口座残高を返す
            } else {
                return "No accounts found, please report this issue."; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.error("Error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    };


    // 最初のアカウントのアドレスを取得する方法
    getAccountAddress = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<string[], never>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });

            if (accounts) { // アカウントが返されたかどうかを確認します
                // リスト内の最初のアカウントのアカウント情報を要求する
                const accInfo = (await this.provider.request({
                    method: "account_info", // アカウント情報を取得する方法を指定します
                    params: [
                        {
                            account: accounts[0], // 最初のアカウントを使用する
                            strict: true, //厳密なモードは正確な記述情報を保障します
                            ledger_index: "current", // 現在の元帳インデックスを使用する
                            queue: true, // キューに入れられたトランザクションを含める
                        },
                    ],
                })) as Record<string, Record<string, string>>;
                return accInfo?.account; // アカウントアドレスを返す
            } else {
                return "No accounts found, please report this issue."; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.error("Error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    }

    // メッセージに署名する方法
    signMessage = async (): Promise<any> => {
        try {
            const msg = "こんにちはの世界をこのストリートビューをXRPLによる Amityclev"; // 署名するメッセージを定義する
            const hexMsg = convertStringToHex(msg); // メッセージを16進数の文字列に変換します
            const txSign = await this.provider.request<{ signature: string }, never>({
                method: "xrpl_signMessage", // メッセージに署名する方法を指定します
                params: {
                    signature: hexMsg, // 署名する16進メッセージを指定します
                },
            });
            return txSign; // 署名されたメッセージを返す
        } catch (error) { // 発生したエラーの処理
            console.log("error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    };

    // トランザクションに署名して送信する方法
    signAndSendTransaction = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<never, string[]>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });

            if (accounts && accounts.length > 0) { // アカウントが返され、リストが空でないかどうかを確認します
                // 支払トランザクションオブジェクトの作成

                const tx: Payment = {
                    TransactionType: "Payment", // トランザクションタイプの指定
                    Account: accounts[0] as string, // 最初のアカウントを送信者として使用する
                    Amount: xrpToDrops(50), // 送信する金額を指定し、XRPをdropsに変換します
                    Destination: "rM9uB4xzDadhBTNG17KHmn3DLdenZmJwTy", // 宛先アドレスの指定
                };
                // 取引の提出を要求する
                const txSign = await this.provider.request({
                    method: "xrpl_submitTransaction", // トランザクションを送信する方法を指定します
                    params: {
                        transaction: tx, // Transactionオブジェクトを指定します
                    },
                });
                return txSign; // トランザクション署名を返す
            } else {
                return "failed to fetch accounts"; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.log("error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    };

}

Aptosで最初のMoveスマートコントラクトを作成するためのステップバイステップガイド

Muhdsodiq Bolarinwa — Thu, 20 Jun 2024 10:51:13 +0000

Aptosで最初のMoveスマートコントラクトを作成するためのステップバイステップガイド

Aptosは、他のブロックチェーンの中でもスケーラビリティ、セキュリティ、信頼性に焦点を当てた独立したレイヤー1の1つです。スマートコントラクトがmoveプログラミングで書かれているスマートコントラクトをサポートしています。ブロックチェーンネットワークは、コンセンサスメカニズムとしてプルーフ・オブ・ステークを利用していますコミュニティの人々のための廃棄物管理システムであるシンプルなスマートコントラクトを作成します。 Aptos blockchainは、高レベルのセキュリティ機能を維持し、取引コストを削減しました。私たちは、移動建物廃棄物管理システムでスマートを構築する方法を掘り下げる必要があります。

Move smart contractを詳しく調べるには、remixまたはvsなどのローカルコードエディタを使用します。

あなたのを開けて下さい Remix IDE

あなたは、プラグインのアイコンをクリックして参照してください、画面の左隅を見てください

サイドバーがポップアップ表示されます。CODE BY WELLDONE STUDIO 「コードスタジオ」でアクティブ化します。

Aptosを選択

スマートコントラクトと対話するには、ウォレットをインストールする必要があります。

このリンクをご覧くださいウォレットコネクトアプトスの学習の動き
Chrome拡張機能からウォレットをダウンロードする

ウォレットと対話するためのウォレットアカウントの設定

あなたが訪問することができます作成した後、財布を作成するAptosをクリックします claim fuacet Aptos testnetまたはdevnetを要求するには、あなたのアドレスをコピーします。

アカウントの設定が完了したら、シードフレーズをどこかにコピーして保存します。

成功裏に請求した後

例としてwaste managerを使用してスマートコントラクトに移動しましょう

左側のサイドバーにあるremix IDEで、新しいプロジェクトの作成プロジェクトの名前を入力します

あなたのを見つけて下さい Move.toml

このコードを貼り付けます

[package]
name = "Examples"
version = "0.0.0"

[addresses]
wastes_Insured_addr = "paste your account address"

[dependencies]
AptosFramework = { git = "https://github.com/aptos-labs/aptos-core.git", subdir = "aptos-move/framework/aptos-framework/", rev = "aptos-node-v1.13.1"}

スマートコントラクトの使用を開始するには、アカウントアドレスの下に配置されるモジュールを定義する必要があります。

module <account-address>::<module-name> {

}

このスマートコントラクトで使用するライブラリをインポートします。

イベント：関数がトリガーされたときにスマートコントラクトで発生したイベントを発行するためのものです。
Table：tableを使用して、スマートコントラクト入力データのテーブルを定義します
署名者：特定の時間にスマートコントラクトを呼び出している人です。
アカウントはスマートコントラクトに関連付けられています。

 use aptos_framework::event;

    use std::string::String;
    use aptos_std::table::{Self, Table};
    use aptos_framework::account;
    use std::signer;

型指定されたフィールドを保持する構造体を定義し、格納、削除、およびコピーする機能を備えています。

struct Waste has store, drop, copy, {
        wast_id: u64,
        wasteType: String,
        collectionLocation: String,
        weigth: u64,
        isRecorded: bool,
        isValidated: bool
    }

私たちは、廃棄物の配列を取る私たちの廃棄物リストを定義し、廃棄物が記録されたときに新しいイベントが放出され、廃棄物ストアの長さとなる

struct WasteList has key {
        waste: Table<u64, Waste>,
        waste_count: u64
    }

私たちは、エラー constを初期化し、エラーが移動言語で数で表されています

const E_NOT_INITIALIZED: u64 = 1;
    const EWASTE_DOESNT_EXIST: u64 = 2;
    const EWASTE_IS_VALIDATED: u64 = 3;

次に、私たちはアカウントが持っている必要があります最初のリスト機能を作成し、それは私たちが署名者に関連付ける取引を提出するために不可欠

public entry fun create_list(account: &signer) {
        let waste_holder = WasteList {
            waste: table::new(),
            set_waste_event: account::new_event_handle<Waste>(account),
            waste_count: 0
        };
        move_to(account, waste_holder);
    }

新しい廃棄物トランザクションをブロックチェーンに送信する廃棄物追加機能を作成します。トランザクションをチェーンに送信するユーザーを知る必要があります。これは、次のような構造体に入力されたすべてのフィールドを受け入れます

public entry fun register_waste(account: &signer, wasteType: String, collectionLocation: String,
    weight: u64, wasteAmount: u64, hospitalAddress: address) acquires WasteList {
// 私たちは署名者のアドレスを取得しています
        let signer_address = signer::address_of(account);
// 署名者が初期化されているかどうかを確認します
        assert!(exists<WasteList>(signer_address), E_NOT_INITIALIZED);
//私たちは、廃棄物リストのリソースを取得しています
        let waste_list = borrow_global_mut<WasteList>(signer_address);
// 私たちは、記録された廃棄物の数を増加させます
        let counter = waste_list.waste_count + 1;
// 新しい廃棄物を記録する
        let new_record_waste = Waste {
            wast_id: counter,
            wasteType:String,
        collectionLocation: String,
        weigth: u64,
        isRecorded: bool,
        isValidated: 
        };
// 廃棄物テーブルに記録された新しい廃棄物を挿入します
        table::upsert(&mut waste_list.waste, counter, new_record_waste);
// 廃棄物の数を設定します。
        waste_list.waste_count = counter;
// 廃棄物を排出するイベント
       event::emit(new_record_waste);

    }

収集するときに廃棄物を検証する必要があります収集されたそれぞれを検証する必要がある会社にそれをもたらします。

public entry fun validate_waste(account: &signer, waste_id: u64) acquires WasteList {
// 署名者のアドレスを取得するためにsigner_addressを初期化しました
        let signer_address = signer::address_of(account);
        assert!(exists<WasteList>(signer_address), E_NOT_INITIALIZED);
// 私たちは廃棄物資源を取得します 
        let waste_list = borrow_global_mut<WasteList>(signer_address);
// アサートを使用して廃棄物が存在するかどうか
        assert!(table::contains(&waste_list.waste, waste_id), EWASTE_DOESNT_EXIST);
        // 廃棄物idと一致する廃棄物を取得します
        let waste_track = table::borrow_mut(&mut waste_list.waste, waste_id);
        // 廃棄物がまだ検証されていないかどうかを確認します
        assert!(waste_track.isValidated == false, EWASTE_IS_VALIDATED);

        // 廃棄物の検証
        waste_track.isValidated = true;
    }

ここでは、Moveプログラミング言語を開始する方法です。

次に、サイドバー内に表示される[コンパイル]ボタンをクリックします

あなたはこれに似た結果を持っているはずです


INCLUDING DEPENDENCY AptosFramework
INCLUDING DEPENDENCY AptosStdlib
INCLUDING DEPENDENCY MoveStdlib
BUILDING Examples
{
  "Result": [
    "92c945f0ec6423e8ec1414a597f1d6fbc954c309f5846cbc73a43b62bfc37eba::waste_insure"
  ]
}

デプロイするには、デプロイボタンを押します。

Create an XRP Ledger Account with Web3Auth (Nextjs): A Step-by-Step Guide

Muhdsodiq Bolarinwa — Sun, 16 Jun 2024 20:00:24 +0000

Introduction

XRP ledger is a decentralized blockchain that focus on cross-border payment, it is used to document financial transactions, and it is fast and low-cost effective. The XRP Ledger was created by the Ripple co-founder and CEO Chris Larsen. XRP Lede utilized XRP as its native cryptocurrency.

In this tutorial, we are implementing XRP Ledger with web3 auth which will generate a new account for us. This account can be used to perform transactions. It can be used to send tokens to any address on the XRP ledger. For users to get an XRPL account user need to authorize either their Google discord or other auth associated with the web3auth.

To get started with the project. We are going to be utilizing NextJs, Tailwind CSS and other web3 auth libraries.

*Open your terminal *

Navigate to the directory where you want your code to be

*Create a new Nextjs project *

npx create-next-app@latest my-project --typescript --eslint

You should have something like this on your terminal

After you successfully implement that you navigate to my-project

cd my-project

When you cd my-project, You install tailwind css

npm install -D tailwindcss postcss autoprefixer

After it is successful you run this

npx tailwindcss init -p

You need to install some dependencies which we are going to utilize for our project

@web3auth/xrpl-provider - Web3Auth XRPL Provider can be used to interact with wallet or connected EVM compatible chain using RPC calls. refrence web3auth/xrpl-provider

@web3auth/openlogin-adapter - This adapter is a wrapper around the openlogin library from Web3Auth and enables the main social login features of Web3Auth. refrence web3auth/openlogin-adapter
@web3auth/modal - It provides the main class for using the default Web3Auth Modal.

@web3auth/base - Web3Auth Base contains the basic typescript types and interfaces for Web3Auth. This comes in handy by providing you with a standard way of importing the values you need to work with the SDKs. reference web3auth/base

@nice-xrpl/react-xrpl -React-xrpl is a set of hooks and components for creating applications using xrpl.js in React. such as getting wallet balance, sending XRP to another wallet address reference nice-xrpl/react-xrpl

You use yarn as your package installer or any package installer that you know such as npm and others.

yarn add @web3auth/xrpl-provider @web3auth/xrpl-provider @web3auth/openlogin-adapter @web3auth/openlogin-adapter @web3auth/modal @web3auth/base @nice-xrpl/react-xrpl

After the installation, we can open our file directory in our vs code

You can start our development process

In your project directory, you need to create a utils folder and a components folder where we define our provider and other functions that you are going to call such as getting an account that was generated by the web3auth login with the XRP Provider Client.

In the root project directory if you are using src in your project structure you create utils folder if not create it in your root directory, not inside your app or pages folder.

Create a new folder name xrpLRPC.ts


//  You start by importing IProvider type from web3auth/base for our typescript
import { IProvider } from "@web3auth/base";

// You import some function which we will use to send input to xrp ledger 
import { convertStringToHex, Payment, xrpToDrops } from "xrpl"

// define  our class where we will put all our requests

export default class XrplRPC {
    // Declaring a private provider variable of type IProvider}
    private provider: IProvider;

     //You define a Constructor that initializes the provider variable with the provided argument
     constructor (provider: IProvider) {
        this.provider = provider
     }

     // Method to get accounts associated with the provider
     getAccounts = async (): Promise<any> => {
        try {
            // Request the accounts using the provider
            const accounts = await this.provider.request<never, string[]>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });
            console.log(accounts, "accounts"); // Log the accounts for debugging purposes

            if (accounts) { // Check if any accounts were returned
                // Request account info for the first account in the list
                const accInfo = await this.provider.request({
                    method: "account_info", // Specify the method to get account info
                    params: [
                        {
                            account: accounts[0], // Use the first account
                            strict: false, // Non-strict mode allows for more lenient account info retrieval
                            ledger_index: "current", // Use the current ledger index
                            queue: true, // Include queued transactions
                        },
                    ],
                });
                return accInfo; // Return the account info
            } else {
                return "No account found, please report issues"; // Return an error message if no accounts are found
            }
        } catch (error) { // Handle any errors that occur
            console.error("Error", error); // Log the error
            return error; // Return the error
        }
     };


     // Method to get the balance of the first account
    getBalance = async (): Promise<any> => {
        try {
            // Request the accounts using the provider
            const accounts = await this.provider.request<string[], never>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });

            if (accounts) { // Check if any accounts were returned
                // Request account info for the first account in the list
                const accInfo = (await this.provider.request({
                    method: "account_info", // Specify the method to get account info
                    params: [
                        {
                            account: accounts[0], // Use the first account
                            strict: true, // Strict mode ensures accurate account info
                            ledger_index: "current", // Use the current ledger index
                            queue: true, // Include queued transactions
                        },
                    ],
                })) as Record<string, Record<string, string>>;
                return accInfo.account_data?.Balance; // Return the account balance
            } else {
                return "No accounts found, please report this issue."; // Return an error message if no accounts are found
            }
        } catch (error) { // Handle any errors that occur
            console.error("Error", error); // Log the error
            return error; // Return the error
        }
    };


    // Method to get the address of the first account
    getAccountAddress = async (): Promise<any> => {
        try {
            // Request the accounts using the provider
            const accounts = await this.provider.request<string[], never>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });

            if (accounts) { // Check if any accounts were returned
                // Request account info for the first account in the list
                const accInfo = (await this.provider.request({
                    method: "account_info", // Specify the method to get account info
                    params: [
                        {
                            account: accounts[0], // Use the first account
                            strict: true, // Strict mode ensures accurate account info
                            ledger_index: "current", // Use the current ledger index
                            queue: true, // Include queued transactions
                        },
                    ],
                })) as Record<string, Record<string, string>>;
                return accInfo?.account; // Return the account address
            } else {
                return "No accounts found, please report this issue."; // Return an error message if no accounts are found
            }
        } catch (error) { // Handle any errors that occur
            console.error("Error", error); // Log the error
            return error; // Return the error
        }
    }

    // Method to sign a message
    signMessage = async (): Promise<any> => {
        try {
            const msg = "Hello world this is tutorial on XRPL by Amityclev"; // Define the message to sign
            const hexMsg = convertStringToHex(msg); // Convert the message to a hexadecimal string
            const txSign = await this.provider.request<{ signature: string }, never>({
                method: "xrpl_signMessage", // Specify the method to sign a message
                params: {
                    signature: hexMsg, // Provide the hexadecimal message to be signed
                },
            });
            return txSign; // Return the signed message
        } catch (error) { // Handle any errors that occur
            console.log("error", error); // Log the error
            return error; // Return the error
        }
    };

    // Method to sign and send a transaction
    signAndSendTransaction = async (): Promise<any> => {
        try {
            // Request the accounts using the provider
            const accounts = await this.provider.request<never, string[]>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });

            if (accounts && accounts.length > 0) { // Check if any accounts were returned and the list is not empty
                // Create the payment transaction object
                const tx: Payment = {
                    TransactionType: "Payment", // Specify the transaction type
                    Account: accounts[0] as string, // Use the first account as the sender
                    Amount: xrpToDrops(50), // Specify the amount to send, converting XRP to drops
                    Destination: "rM9uB4xzDadhBTNG17KHmn3DLdenZmJwTy", // Specify the destination address
                };
                // Request to submit the transaction
                const txSign = await this.provider.request({
                    method: "xrpl_submitTransaction", // Specify the method to submit a transaction
                    params: {
                        transaction: tx, // Provide the transaction object
                    },
                });
                return txSign; // Return the transaction signature
            } else {
                return "failed to fetch accounts"; // Return an error message if no accounts are found
            }
        } catch (error) { // Handle any errors that occur
            console.log("error", error); // Log the error
            return error; // Return the error
        }
    };

}

You create a component folder if you have not created already.

Navigate to your component folder

create a file called Web3Authentication.tsx inside compoenent let utilize the various functions we already define in in xrpLRPC.ts

// 'use client' ensures that the following code is executed on the client side
'use client'
// Import necessary modules and components from various packages
import { XrplPrivateKeyProvider } from "@web3auth/xrpl-provider"; // Provides a private key provider for XRPL
import { Web3Auth } from "@web3auth/modal"; // Main Web3Auth module for authentication
import { getXrplChainConfig } from "@web3auth/base"; // Utility function to get XRPL chain configuration
import { CHAIN_NAMESPACES, UX_MODE, WEB3AUTH_NETWORK, IProvider } from "@web3auth/base"; // Various constants and interfaces for Web3Auth
import RPC from "../utils/xrpLRPC"; // Custom RPC class for XRPL interactions
import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; // Adapter for Openlogin
import React, { useEffect, useState } from 'react'; // React hooks for managing state and side effects

// Client ID for Web3Auth which you can get from the web3 auth dashboard https://dashboard.web3auth.io/
const clientId = "BKVW17ohm6Mt-A6O_A633ECD5fOYUEkyOwmU5sdoEhtQFj0PiS28wxLO5DkmbqaAEsCgsd_BzqxhYjabDihcjLc";

// Main component for Web3 authentication
const Web3Authentication = () => {
  // Define state variables
  const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null); // State for Web3Auth instance
  const [provider, setProvider] = useState<IProvider | null>(null); // State for provider instance
  const [loggedIn, setLoggedIn] = useState(false); // State to track if the user is logged in

  // Configuration for the XRPL chain
  const chainConfig = {
    chainNamespace: CHAIN_NAMESPACES.XRPL,
    chainId: "0x2",
    rpcTarget: "https://s.altnet.rippletest.net:51234/", // RPC endpoint for XRPL testnet
    wsTarget: "wss://s.altnet.rippletest.net:51233/", // WebSocket endpoint for XRPL testnet
    ticker: "XRP",
    tickerName: "XRPL",
    displayName: "xrpl testnet",
    blockExplorerUrl: "https://devnet.xrpl.org/", // Block explorer URL for XRPL testnet
  };

  // useEffect hook to initialize Web3Auth when the component mounts
  useEffect(() => {
    const init = async () => {
      try {
        // Initialize XRPL private key provider
        const xrplProvider = new XrplPrivateKeyProvider({
          config: {
            chainConfig: getXrplChainConfig(0x2), // Get XRPL chain configuration
          },
        });

        console.log(xrplProvider.config, "xrplProvider.config"); // Log provider configuration for debugging

        // Initialize Web3Auth with the specified configurations
        const web3auth = new Web3Auth({
          clientId,
          uiConfig: { // UI customization options
            appName: "W3A",
            theme: {
              primary: "red",
            },
            mode: "dark",
            logoLight: "https://web3auth.io/images/web3authlog.png",
            logoDark: "https://web3auth.io/images/web3authlogodark.png",
            defaultLanguage: "en",
            loginGridCol: 3,
            primaryButton: "externalLogin",
            uxMode: UX_MODE.REDIRECT,
          },
          web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // Web3Auth network configuration
          privateKeyProvider: xrplProvider, // XRPL private key provider
        });

        // Initialize and configure Openlogin adapter
        const openloginAdapter = new OpenloginAdapter({
          loginSettings: {
            mfaLevel: "optional",
          },
          adapterSettings: {
            uxMode: "redirect",
            whiteLabel: {
              logoLight: "https://web3auth.io/images/web3authlog.png",
              logoDark: "https://web3auth.io/images/web3authlogodark.png",
              defaultLanguage: "en",
            },
            mfaSettings: {
              deviceShareFactor: {
                enable: true,
                priority: 1,
                mandatory: true,
              },
              backUpShareFactor: {
                enable: true,
                priority: 2,
                mandatory: true,
              },
              socialBackupFactor: {
                enable: true,
                priority: 3,
                mandatory: true,
              },
              passwordFactor: {
                enable: true,
                priority: 4,
                mandatory: true,
              },
            },
          },
        });
        web3auth.configureAdapter(openloginAdapter); // Configure Web3Auth with the Openlogin adapter

        setWeb3auth(web3auth); // Set the Web3Auth instance in state

        await web3auth.initModal(); // Initialize the Web3Auth modal

        if (web3auth.connected) { // Check if already connected
          setProvider(web3auth?.provider); // Set the provider instance in state
          setLoggedIn(true); // Set logged in state to true
        }
      } catch (error) {
        console.error(error); // Log any errors that occur during initialization
      }
    };

    init(); // Call the init function
  }, []);

  // Function to handle user login
const login = async () => {
    if (!web3auth) {
      // If Web3Auth is not initialized, display a message in the UI console
      uiConsole("web3auth not initialized yet");
      return;
    }
    // Connect to Web3Auth and set the provider
    const webauthProvider = await web3auth.connect();
    setProvider(webauthProvider);
    setLoggedIn(true); // Update the state to indicate the user is logged in
  };

  // Function to authenticate the user
  const authenticateUser = async () => {
    if (!web3auth) {
      // If Web3Auth is not initialized, display a message in the UI console
      uiConsole("web3auth not initialized yet");
      return;
    }
    // Authenticate the user and get an ID token
    const idToken = await web3auth.authenticateUser();
    // Display the ID token in the UI console
    uiConsole(idToken);
  };

  // Function to get user information
  const getUserInfo = async () => {
    if (!web3auth) {
      // If Web3Auth is not initialized, display a message in the UI console
      uiConsole("web3auth not initialized yet");
      return;
    }
    // Retrieve user information from Web3Auth
    const user = await web3auth.getUserInfo();
    // Display the user information in the UI console
    uiConsole(user);
  };

  // Function to handle user logout
  const logout = async () => {
    if (!web3auth) {
      // If Web3Auth is not initialized, display a message in the UI console
      uiConsole("web3auth not initialized yet");
      return;
    }
    // Log out the user from Web3Auth
    await web3auth.logout();
    setProvider(null); // Reset the provider state
    setLoggedIn(false); // Update the state to indicate the user is logged out
  };

  // Function to get the accounts associated with the provider
  const getAccounts = async () => {
    if (!provider) {
      // If the provider is not initialized, display a message in the UI console
      uiConsole("provider not initialized yet");
      return;
    }
    // Create a new RPC instance with the provider
    const rpc = new RPC(provider);
    // Get the user accounts from the RPC instance
    const userAccount = await rpc.getAccounts();
    // Display the account information in the UI console
    uiConsole("Account info: ", userAccount);
  };

  // Function to get the balance of the user account
  const getBalance = async () => {
    if (!provider) {
      // If the provider is not initialized, display a message in the UI console
      uiConsole("provider not initialized yet");
      return;
    }
    // Create a new RPC instance with the provider
    const rpc = new RPC(provider);
    // Get the balance from the RPC instance
    const balance = await rpc.getBalance();
    // Display the balance in the UI console
    uiConsole("Balance", balance);
  };

  // Function to send a transaction
  const sendTransaction = async () => {
    if (!provider) {
      // If the provider is not initialized, display a message in the UI console
      uiConsole("provider not initialized yet");
      return;
    }
    // Create a new RPC instance with the provider
    const rpc = new RPC(provider);
    // Sign and send the transaction
    const result = await rpc.signAndSendTransaction();
    // Display the result of the transaction in the UI console
    uiConsole(result);
  };

  // Function to sign a message
  const signMessage = async () => {
    if (!provider) {
      // If the provider is not initialized, display a message in the UI console
      uiConsole("provider not initialized yet");
      return;
    }
    // Create a new RPC instance with the provider
    const rpc = new RPC(provider);
    // Sign the message
    const result = await rpc.signMessage();
    // Display the signed message in the UI console
    uiConsole(result);
  };

  // Function to get the account address
  const getAccountAddress = async () => {
    if (!provider) {
      // If the provider is not initialized, display a message in the UI console
      uiConsole("provider not initialized yet");
      return;
    }
    // Create a new RPC instance with the provider
    const rpc = new RPC(provider);
    // Get the account address
    const result = await rpc.getAccountAddress();
    // Display the account address in the UI console
    uiConsole(result);
  };

  // Function to get the wallet seed
//   const getWalletSeed = async () => {
//     if (!provider) {
//       // If the provider is not initialized, display a message in the UI console
//       uiConsole("provider not initialized yet");
//       return;
//     }
//     // Create a new RPC instance with the provider
//     const rpc = new RPC(provider);
//     // Get the wallet seed
//     const result = await rpc.getWalletSeed();
//     // Log the result in the console for debugging
//     console.log(result, "result: ");
//     // Display the wallet seed in the UI console
//     uiConsole(result);
//   };

  // Function to display messages in the UI console
  function uiConsole(...args) {
    // Find the HTML element to display the messages
    const el = document.querySelector("#console>p");
    if (el) {
      // Display the messages in the HTML element as a formatted JSON string
      el.innerHTML = JSON.stringify(args || {}, null, 2);
    }
  }

  // Component to display the view when the user is logged in
const loggedInView = (
    <>
      <div className="flex-container">
        <div>
          {/* Button to get user information */}
          <button onClick={getUserInfo} className="card">
            Get User Info
          </button>
        </div>
        <div>
          {/* Button to authenticate user and get ID token */}
          <button onClick={authenticateUser} className="card">
            Get ID Token
          </button>
        </div>
        <div>
          {/* Button to get the account address */}
          <button onClick={getAccountAddress} className="card">
            Address
          </button>
        </div>
        {/* <div>
          Button to get the wallet seed
          <button onClick={getWalletSeed} className="card">
            Seed
          </button>
        </div> */}
        <div>
          {/* Button to get user accounts */}
          <button onClick={getAccounts} className="card">
            Get Accounts
          </button>
        </div>
        <div>
          {/* Button to get the balance of the account */}
          <button onClick={getBalance} className="card">
            Get Balance
          </button>
        </div>
        <div>
          {/* Button to sign a message */}
          <button onClick={signMessage} className="card">
            Sign Message
          </button>
        </div>
        <div>
          {/* Button to send a transaction */}
          <button onClick={sendTransaction} className="card">
            Send Transaction
          </button>
        </div>
        <div>
          {/* Button to log out the user */}
          <button onClick={logout} className="card">
            Log Out
          </button>
        </div>
      </div>
      {/* Console to display messages */}
      <div id="console" style={{ whiteSpace: "pre-line" }}>
        <p style={{ whiteSpace: "pre-line" }}></p>
      </div>
    </>
  );

  // Component to display the view when the user is not logged in
  const unloggedInView = (
    <button onClick={login} className="card">
      Login
    </button>
  );

  // Main component to handle the Web3Auth authentication process
  return (
    <div>
      <div className="container">
        <h1 className="title">
          <a target="_blank" href="https://web3auth.io/docs/sdk/pnp/web/modal" rel="noreferrer">
            Web3Auth{" "}
          </a>
          & ReactJS XRPL Example
        </h1>

        {/* Display the loggedInView if logged in, otherwise display unloggedInView */}
        <div className="grid">{loggedIn ? loggedInView : unloggedInView}</div>

        <footer className="footer">
          {/* Link to the source code */}
          <a
            href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/blockchain-connection-examples/xrpl-modal-example"
            target="_blank"
            rel="noopener noreferrer"
          >
            Source code
          </a>
          {/* Button to deploy with Vercel */}
          <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FWeb3Auth%2Fweb3auth-pnp-examples%2Ftree%2Fmain%2Fweb-modal-sdk%2Fblockchain-connection-examples%2Fxrpl-modal-example&project-name=w3a-xrpl-modal&repository-name=w3a-xrpl-modal">
            <img src="https://vercel.com/button" alt="Deploy with Vercel" />
          </a>
        </footer>
      </div>
    </div>
  );

}

export default Web3Authentication;

Open your terminal
Make sure you are in the project folder in your terminal
run

yarn run dev

When you login with web3auth in the project, it generate you new a xrpl account, for you.
Noted the account is not activate until you send a token of 15 xrp to the address.

You can check this Demo video on how to send xrp the generated account

A Step-by-Step Guide to Writing Your First Move Smart Contract on Aptos

Muhdsodiq Bolarinwa — Fri, 07 Jun 2024 22:16:24 +0000

A Step-by-Step Guide to Writing Your First Move Smart Contract on Aptos

Aptos is one of the independent layer 1 laying focus on scalability, security, and reliability among other blockchain. It supports smart contracts which its smart contract is written in move programming. The blockchain network utilizes Proof of Stake as the consensus mechanism We will create a simple smart contract a waste management system for people in a community. Aptos blockchain has maintained high-level security features and reduced transaction costs. We should delve into how to build a smart with move building waste management system.

To delve into move smart contract, you can either use remix or your local code editor such as vs for the sake of this tutorial we will utilize remix

Open your Remix IDE

Look at the left corner of your screen you see a plugin icon click

A sidebar will pop up find CODE BY WELLDONE STUDIO activates in the code studio

Select Aptos

You need to install a wallet to interact with your smart contract. Visit this link wallet connect Aptos learning move to download the wallet from chrome extension.

Setup your wallet account to interact with your wallet

Click Aptos to create a wallet after creating you can visit claim fuacet Aptos to claim testnet or devnet copy your address.
After you finish setting up the account, copy your seed phrase somewhere save.

After successfully claim

Let move to our smart contract using waste manager as an example

In your remix IDE on your left sidebar, create a new create project input the name of your project

Locate your Move.toml
paste this code



[package]
name = "Examples"
version = "0.0.0"

[addresses]
wastes_Insured_addr = "paste your account address"

[dependencies]
AptosFramework = { git = "https://github.com/aptos-labs/aptos-core.git", subdir = "aptos-move/framework/aptos-framework/", rev = "aptos-node-v1.13.1"}

To get the address generated for this account navigate to .aptos/config.yaml you will find the generated account with the public key and private key



profiles:
  default:
    private_key: "0xee8f387ef0b4bb0018c4b91d1c0f71776a9b85935b4c6ec2823d6c0022fbf5cb"
    public_key: "0xc6c07218d79a806380ca67761905063ec7a78d41f79619f4562462a0f8b6be11"
    account: cbddf398841353776903dbab2fdaefc54f181d07e114ae818b1a67af28d1b018
    rest_url: "https://api.devnet.aptoslabs.com"
    faucet_url: "https://faucet.devnet.aptoslabs.com"

To get started with the smart contract, you need to define a module that is placed under the account address which



module <account-address>::<module-name> {

}

We will define a module, this module will be the container for our entire smart contract



module wastes_Insured_addr::wastes-Insured {

}

We import our library which we are going to use in this smart contract.

Event is for emitting any event that occurred in our smart contract when a function is triggered.
Table: we utilize table to define our table for the smart contract input data
Signer is who is calling the smart contract at a particular time.
An account is associated with our smart contract.



 use aptos_framework::event;

    use std::string::String;
    use aptos_std::table::{Self, Table};
    use aptos_framework::account;
    use std::signer;

We will define a struct that will hold our typed fields, it has the capability to store, drop, and copy.



struct Waste has store, drop, copy, {
        wast_id: u64,
        wasteType:String,
        collectionLocation: String,
        weigth: u64,
        isRecorded: bool,
        isValidated: bool
    }

We will define our WasteList which will take waste array, new events emit when waste is recorded, and counter which will serve as the length of the waste store.



struct WasteList has key {
        waste: Table<u64, Waste>,
        waste_count: u64
    }

We initialized error const, error are represented in number inmove language



const E_NOT_INITIALIZED: u64 = 1;
    const EWASTE_DOESNT_EXIST: u64 = 2;
    const EWASTE_IS_VALIDATED: u64 = 3;

Next, we create a list function which is the first an account must have, it's essential for submitting transactions which we will associate with a signer



public entry fun create_list(account: &signer) {
        let waste_holder = WasteList {
            waste: table::new(),
            set_waste_event: account::new_event_handle<Waste>(account),
            waste_count: 0
        };
        move_to(account, waste_holder);
    }

We create a waste add function that submits the new waste transaction to the blockchain. We need to know the user submitting the transaction to the chain. it will accept all the fields typed in our struct which looks like this



public entry fun register_waste(account: &signer, wasteType: String, collectionLocation: String,
    weight: u64, wasteAmount: u64, hospitalAddress: address) acquires WasteList {
// we are getting the signer address
        let signer_address = signer::address_of(account);
// we check if the signer has been initialized or not
        assert!(exists<WasteList>(signer_address), E_NOT_INITIALIZED);
//We are getting waste list resources
        let waste_list = borrow_global_mut<WasteList>(signer_address);
// we increament the count of waste recorded
        let counter = waste_list.waste_count + 1;
// record a new waste
        let new_record_waste = Waste {
            wast_id: counter,
            wasteType:String,
        collectionLocation: String,
        weigth: u64,
        isRecorded: bool,
        isValidated: 
        };
// insert new waste recorded in to the waste table
        table::upsert(&mut waste_list.waste, counter, new_record_waste);
// set the waste count 
        waste_list.waste_count = counter;
// emit the waste event
       event::emit(new_record_waste);

    }

We will have to validate waste when collect brings it to the company which each collected will have to be verified.



public entry fun validate_waste(account: &signer, waste_id: u64) acquires WasteList {
// initialized signer_address to get the signer address
        let signer_address = signer::address_of(account);
        assert!(exists<WasteList>(signer_address), E_NOT_INITIALIZED);
// we get the waste resources 
        let waste_list = borrow_global_mut<WasteList>(signer_address);
// we check if waste exist using assert 
        assert!(table::contains(&waste_list.waste, waste_id), EWASTE_DOESNT_EXIST);
        // get the waste that match the waste id 
        let waste_track = table::borrow_mut(&mut waste_list.waste, waste_id);
        // check if the waste is not validated yet 
        assert!(waste_track.isValidated == false, EWASTE_IS_VALIDATED);

        // validate the waste
        waste_track.isValidated = true;
    }

Here is how to get started with Move programming language.

Next, click the compile button which appears inside the sidebar

You should have results similar to this




INCLUDING DEPENDENCY AptosFramework
INCLUDING DEPENDENCY AptosStdlib
INCLUDING DEPENDENCY MoveStdlib
BUILDING Examples
{
  "Result": [
    "92c945f0ec6423e8ec1414a597f1d6fbc954c309f5846cbc73a43b62bfc37eba::waste_insure"
  ]
}

To deploy, hit the deploy button, to deploy.

Coming next how can we pay the waste collector using a
move smart contract?

Building Paymaster Using Zksync-Ethers And Next Js

Muhdsodiq Bolarinwa — Thu, 30 May 2024 11:40:53 +0000

What is paymaster? (ERC- 4337)

This project is to onboard developers to Zksync ecosystem utilizing Zksync ethers to build their dapps with nextjs. In this technical tutorial, we developed a simple smart contract which is known as Bank.sol. This tutorial adopted what is known as account abstraction, where we use Paymaster to pay the gas fee for every transaction the user performs on a dapp.

Paymaster is a mechanism to pay for user's network gas fees, they are executable sets of codes that pay for users' transaction which comes from account Abstraction. Account Abstraction is a system put in place where user's assets are stored on smart contracts rather than externally owned account EOA. It improves users' experience which solve the issue where a user lost their private key. Account Abstraction can come in different phases it depends on how they are designed for different purposes. They are backed up by smart contracts, and user's wallets are generated with the smart contract, which allows the user to manage their assets on smart contracts. Accounts generated by the smart contract can also perform transactions the way EOA performs transactions.

Zksync is a layer 2 scaling Ethereum solution that adopts ZK rollups. They help to reduce the congested Ethereum network and reduce the transaction fee on Ethereum. We will be looking at how we can use Paymaster with our Next js, and how to implement Paymaster to pay for each transaction performed by users on the Zksync. Paymaster allows a third party to sponsor gas fees.

IPaymaster interface
EIP4337, our account abstraction protocol supports paymasters: accounts that can compensate for other accounts' transactions execution.

Each paymaster should implement the IPaymaster interface. It contains the following two methods:

validateAndPayForPaymasterTransaction is mandatory and will be used by the system to determine if the paymaster approves paying for this transaction. If the paymaster is willing to pay for the transaction, this method must send at least tx.gasprice * tx.gasLimit to the operator. It should return the context that will be one of the call parameters to the postTransaction method.
postTransaction is optional and is called after the transaction executes. Note that unlike EIP4337, there is no guarantee that this method will be called. In particular, this method won't be called if the transaction fails with out of gas error. It takes four parameters: the context returned by validateAndPayForPaymasterTransaction, the transaction itself, a flag that indicates whether the transaction execution succeeded, and the maximum amount of gas the paymaster might be refunded with.
Reference from Zksync Docs You can read More from there

To get started

Run this to create a template from Zksync, this will create a custom paymaster smart contract by Zksync and set your hardhat project direction.

npx zksync-cli create custom-paymaster-tutorial --template hardhat_solidity

You file directory should look like this

Install all the necessary dependencies depending on the package installer you

yarn install or 
npm install

Navigate to your Contract directory

cd contract/paymasters

We are going to be utilizing GeneralPaymaster for our gas-sponsoring paymaster, you don't have to worry about writing the full logic it has already created, you can decide to customize it in your preferred way.
We need to compile our smart contract

yarn compile

Create a new file name .env in your root folder to add your private key to deploy.

WALLET_PRIVATE_KEY=

To deploy your GeneralPaymaster smart contract. In your project root direct

cd deploy

Create file name deploy-paymaster.ts to deploy the General paymaster. Copy and paste this code

import { deployContract } from "./utils";


export default async function () {
    const contractArtifactName = "GeneralPaymaster";
    await deployContract(contractArtifactName);
}

To deploy your GeneralPaymaster on your Terminal run

yarn hardhat deploy-zksync --script deploy-paymaster.ts

Copy your paymaster address to a safe place, we utilize it for sponsoring gas fees.

Initialized your next js project.

npx create-next-app my-project


![zkysnc paymaster nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1c32tp5i10bf4z48qnx.png)

Install these dependencies

npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query @zksync-ethers @ethers @react-toastify

You might want to remove the ones you won't be using just for easy walkthrough I install some dependencies.
I will be utilizing a simple smart contract which you can file in this tutorial which is created in generated template of zksync. You can get it

cd hello-zksync/contract/Bank.sol

In my next js project root directory, I created a folder named abi folder where I placed bank abi and deployed the contract on Zksync sepolia testnet.

In your nextjs root file create .env add your environment variable.

NEXT_PUBLIC_WALLET_PRIVATE_KEY=your_private_key

Do not push your .env to GitHub

cd pages/index.jsx

or in your page.js depends on how you structure your nextjs project folder

That is where we will be interacting with our smart contract and using Paymaster for gas fee transactions. Import all the necessary items that will be used to connect to your wallet and interact with the smart contract

Define your useState from react to handle any balances, paymaster balance changes from the smart contract, and the amount you are sending to the smart contract.

Set your paymaster address, get your wallet and a new provider as well to interact with your smart contract.

Initiate your contract instance

Your code should look like this

Define your paymaster custom data which will be recognized by the on-chain that the paymaster is sponsoring for the smart contract gas fee. It can be ApprovalBase or General, We want it to pay for it generally not approval base.

Define a function to handle the deposit function in the smart contract, which will send ether to the smart contract address

Define a function to handle the withdraw function in the solidity smart contract, which will withdraw ether from the smart contract address to the wallet of the user that deposited.

Define a useEffect from react and a function to keep fetching the balance of the paymaster and smart contract deposited balance

Implement your custom function with your frontend.

To use Viem for Zksync paymaster account abstraction.

Create helper folder in your src directory name a file wagmiconfig.js
Define your wallet client and public client, which we use to interact and connect to our smart contract.

// Check if the code is running in a browser environment and if the 'ethereum' object is available on the 'window' object
export const walletClient = typeof window !== 'undefined' && window.ethereum
  ? // If both conditions are true, create a wallet client using the provided Ethereum provider (window.ethereum)
    createWalletClient({
      chain: zkSyncSepoliaTestnet, // Specify the chain to connect to (zkSync Sepolia Testnet in this case)
      transport: custom(window?.ethereum), // Use a custom transport with the Ethereum provider
    }).extend(eip712WalletActions()) // Extend the client with additional EIP-712 wallet actions
  : // If either condition is false, set 'walletClient' to null
    null;

// Create a public client that can be used for read-only operations on the zkSync Sepolia Testnet
export const publicClient = createPublicClient({
  chain: zkSyncSepoliaTestnet, // Specify the chain to connect to (zkSync Sepolia Testnet in this case)
  transport: http() // Use HTTP transport for connecting to the chain
});

in your index page there you want to implement the paymaster

// import utils to get paymaster params

import { utils } from "zksync-ethers";
// Define 'params' by calling 'utils.getPaymasterParams' to generate parameters for a paymaster
const params = utils.getPaymasterParams(
  paymasterAddress, // The address of the paymaster
  {
    type: "General", // Specify the type of paymaster operation (in this case, "General" or "ApprovalBased")
    innerInput: new Uint8Array(),
  }
);

Define your handleDepositSave to sign the transaction with your metamask

// Define an asynchronous function to handle the deposit save operation
const handleDepositsave = async (e) => {
    e.preventDefault(); // Prevent the default form submission behavior

    try {
        // Request accounts from the user's wallet
        const [account] = typeof window !== 'undefined' && window.ethereum
            ? await window.ethereum.request({ method: 'eth_requestAccounts' }) // Request accounts if in a browser with Ethereum provider
            : [];

        if (!account) {
            throw new Error("No account found. Please connect your wallet."); // Throw an error if no account is found
        }

        console.log("Using account:", account); // Log the account being used
        const convertToEthers = parseEther(amount.toString() || "0"); // Convert the input amount to ethers

        // Simulate the contract interaction
        const result = await publicClient.simulateContract({
            address: bank.address, // Address of the bank contract
            abi: bank.abi, // ABI of the bank contract
            functionName: "deposit", // Name of the function to call
            args: [], // Arguments for the function
            value: convertToEthers, // Ether value to send with the function call
            account, // Account to perform the operation
            paymasterInput: params.paymasterInput, // Paymaster input parameters
            paymaster: paymasterAddress, // Address of the paymaster
        });

        // Log the result of simulateContract
        console.log("simulateContract result:", result);

        const { request } = result; // Extract the request object from the simulation result

        // Log the request object for debugging
        console.log("Request object:", request);

        if (request) {
            // Perform the contract write operation
            const response = await walletClient.writeContract({
                ...request, // Spread the request object into the writeContract call                
            });

            console.log("Transaction response:", response); // Log the transaction response
        } else {
            throw new Error("Request object is undefined"); // Throw an error if the request object is undefined
        }
    } catch (error) {
        console.error("Error during deposit:", error); // Catch and log any errors that occur during the process
    }
};

<main className="flex flex-col items-center justify-between p-24">
      <ConnectButton />
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <p className=" text-white">Contract balance is {smartBalance}</p>
        <p>Set Paymaster Balance {paymasterBalance}</p>
        <form onSubmit={handleDepositsave}>
          <input type="text" placeholder="Enter Eth amount" className=" text-black font-medium text-[16px] p-4" onChange={(e) => setAmount(e.target.value)} />
          <button className="rounded-md border-2 border-white p-2" type="submit">Send</button>
        </form>
        <button onClick={withdrawSavings} className=" rounded-md border-2 border-white p-2">Withdraw</button>
      </div>
    </main>

For the GitHub source code you can find it here
Source Code

For further references check Zksync Doc

Smart Contract Verification And Deploying Using Hardhat

Muhdsodiq Bolarinwa — Wed, 27 Mar 2024 21:33:39 +0000

Introduction

Verifying smart contracts on the blockchain is essential for transparency, security, and trust. It allows developers and users to inspect and interact with the smart contract’s source code. In this tutorial, we’ll utilize Hardhat, a powerful development environment for Ethereum.

Prerequisites

Node.js installed
An Ethereum account with a private key
An API key from a service like Etherscan for contract verification

For this tutorial we will be using Arbitrum-Sepolia

Steps

### Create your project directory folder
In your project direct run

npm install --save-dev hardhat

yarn add --dev hardhat

Initialize Your Hardhat Project:

Inside the project folder, initialize Hardhat

npx hardhat init

Install Necessary Dependencies

Install additional packages for deployment, load environment variables, and verification

npm install @nomicfoundation/hardhat-toolbox dotenv

Create an Environment File:

Create a .env file in your project root.
Add the following variables:

PRIVATE_KEY: Your Ethereum account’s private key.
API_KEY: Your Etherscan API key for contract verification.

Deploy Your Smart Contract

Choose a smart contract. We'll use the Lock Fund from your Hardhat project.

Write a deployment script "scripts/deploy.js".

Set up your hardhat.config.js in the project root.

Deploy the contract to the desired network. For this, We will use Arbitrum Sepolia. Run

npx hardhat run scripts/deploy.js --network arbitrum_sepolia

After deployment, an arguments.js file will be created in your root folder, storing the contract constructor arguments.

Verify Your Smart Contract

To enhance trust, verify the contract

npx hardhat verify --constructor-args arguments.js <your-contract-address> --network arbitrum_sepolia

![how to deploy hardhat and verify smart contract(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a33yl0ymxrluynfm96uc.png)

Additional Notes:

Ensure your private key remains confidential.
Regularly review and update your contract as needed.

Remember, thorough verification contributes to the integrity of DApps built on the blockchain.

Deploy Your Backend Securely and Effortlessly with Vercel

Muhdsodiq Bolarinwa — Mon, 25 Mar 2024 01:01:45 +0000

Why Deploy Your Backend on Vercel?

When you're working on a personal project that needs a backend (server-side code).

Vercel enforces HTTPS for your backend. This ensures safe communication between your front end and back end. This is critical. Browsers block mixed content (HTTP within HTTPS pages) to stop security holes. Deploying on Vercel lets you avoid this browser restriction. It also guarantees a secure user experience.
This makes it a budget-friendly solution for deploying backend code. This allows you to experiment and build without worrying about upfront costs.

Getting Started with Vercel Deployment

Here's a guide to deploying your backend on Vercel. This works even if you're using a MongoDB as your backend storage.

Project Setup

Create a new directory for your project.

 mkdir deployvercel

Initialize a Node.js project using yarn init or npm init.

Install Express.js

yarn add express

npm install express

Create a file named index.js and define your backend logic within this file. This includes setting up Express routes. It means defining API endpoints and handling database interactions (if needed).

Run the Application Locally

Add a script to your package.json file to run your backend application locally:

JSON

scripts": {
    "dev": "nodemon index.js",
  }

To start the backend server Run

npm run dev or yarn dev

Configure Vercel Deployment (vercel.json)

Put a vercel.json file in your project's root directory. It tells Vercel how to handle your backend code. Here is the configuration:

{
    "version": 2,
    "builds": [
      {
        "src": "index.js",
        "use": "@vercel/node"
      }
    ],
    "routes": [
      {
        "src": "/(.*)",
        "dest": "index.js",
        "methods": ["GET", "POST", "PUT", "PATCH", "DELETE",  "OPTIONS"]
      }
    ]
  }

This configuration tells Vercel to use its Node.js build process. It handles all requests to your backend using the index.js file.

Deploy to Vercel Using Git

Push your code to GitHub.
In your Vercel dashboard, add a new project and connect it to your Git repository.

Vercel will find your vercel.json file. It will deploy your backend when you push code changes to your Git repository.
With these steps, you'll have a secure backend. It will be scalable and globally distributed. It will be deployed on Vercel and ready to serve your frontend or API.

Github Url

https://github.com/Amity808/deployVercel-tutorial