web3paw v1.3.0

web3paw package

You need to have the Paw wallet extension installed to your chrome browser to use this package.

Paw Wallet Chrome Extension

The Paw Wallet Chrome Extension is a Web 3.0 wallet that allows users to securely manage their Paw tokens. With this extension, users can easily send and swap Paw tokens directly from their browser. The wallet provides a user-friendly interface, making it convenient to perform transactions and interact with decentralized applications (dApps) on the Paw blockchain. Whether you're a seasoned crypto enthusiast or a beginner, the Paw Wallet Chrome Extension simplifies the process of managing your digital assets and participating in the decentralized ecosystem.

web3paw NPM Package

The web3paw NPM package is designed to integrate seamlessly with the Paw Wallet Chrome Extension, enabling developers to interact with the Paw blockchain through their web applications. Users must have the Paw Wallet Extension installed in their Chrome browser to utilize this package. Here are some of the functionalities the web3paw package offers:

Connect to Wallet:

Easily establish a connection between your web application and the Paw Wallet to manage user accounts.

Send Transactions:

Allow users to send Paw tokens to any address securely through your application.

By using the web3paw package, developers can build robust dApps that provide a seamless experience for users to interact with the Paw blockchain, leveraging the secure and intuitive features of the Paw Wallet Chrome Extension.

Installation

Step 1

npx create-react-app paw-wallet-Dapp

Step 2

> npm install web3paw

Step 3

Import below functions from the web3paw package and basic react imports

import React, { useEffect, useState } from "react";
import {
  authWallet,
  connectWallet,
  disconnectWallet,
  handleTransaction,
  tokenInfo,
  getPawPrice,
  getTrasanctionReceipt,
  getMyTrasanctionsCount,
  getConnectedWalletAddress,
  estimateProcessingFee,
  setPawName,
  getPawNameByAddress,
  getPawAddressByName,
  getBlockNumber,
  getBlock,
  feeTypeData,
  getSwapPrice,
  CreateWallet,
  DisplayWalletQRCode,
  getBalance,
  getTokenBalance,
  getLedgers,
  addLiquidity,
  swapInInterface
} from "web3paw";

Step 4

Create these states and error handling function.

  const [account, setAccount] = useState(null);
  const [Token_address, setToken_address] = useState(null);
  const [error, setError] = useState(null);
  const [sendTransactionStatus, setsendTransactionStatus] = useState(null);
  const [recAddress, setrecAddress] = useState("");
  const [amount, setamount] = useState("");
  const [TokenAddressInfo, setTokenAddressInfo] = useState("");
  const [TokenInfo, setTokenInfo] = useState(null);
  const [PawPrice, setPawPrice] = useState(null);
  const [TransactionReceipt, setTransactionReceipt] = useState(null);
  const [TxID, setTxID] = useState("");
  const [MyTransactionsCount, setMyTransactionsCount] = useState(null);
  const [ConnectedWalletAddress, setConnectedWalletAddress] = useState(null);
  const [EstimateProcessingFee, setEstimateProcessingFee] = useState(null);
  const [WalletAddressForEstimate, setWalletAddressForEstimate] = useState("");
  const [TokenAddressForEstimate, setTokenAddressForEstimate] = useState("");
  const [estimateAmount, setestimateAmount] = useState("");
  const [PawNameValue, setPawNameValue] = useState("");
  const [nameChandingAddress, setnameChandingAddress] = useState("");
  const [PawNameResponse, setPawNameResponse] = useState(null);
  const [GetPawNameValue, setGetPawNameValue] = useState("");
  const [GetPawAddressValue, setGetPawAddressValue] = useState("");
  const [PawWalletAddressByName, setPawWalletAddressByName] = useState(null);
  const [PawWalletName, setPawWalletName] = useState(null);
  const [BlockNumber, setBlockNumber] = useState(null);
  const [Block_No, setBlock_No] = useState("");
  const [BlockNo, setBlockNo] = useState(null);
  const feeTypes = Object.values(feeTypeData);
  const [selectedFeeType, setselectedFeeType] = useState("");
  const [TokenAddress1, setTokenAddress1] = useState("");
  const [TokenAddress2, setTokenAddress2] = useState("");
  const [Value, setValue] = useState("");
  const [SwapPrice, setSwapPrice] = useState(null);
  const [walletPassword, setwalletPassword] = useState("");
  const [CreateWalletResponse, setCreateWalletResponse] = useState(null);
  const [walletAddress, setwalletAddress] = useState("");
  const [getWalletPawBalanceResponse, setgetWalletPawBalanceResponse] = useState(null);
  const [BalanceWalletAddress, setBalanceWalletAddress] = useState("");
  const [BalanceTokenAddress, setBalanceTokenAddress] = useState("");
  const [getTokenBalanceResponse, setgetTokenBalanceResponse] = useState(null);
    const [LedgerWalletAddress, setLedgerWalletAddress] = useState("");
  const [getLedgerResponse, setgetLedgerResponse] = useState(null);
  const [FromTokenAddress, setFromTokenAddress] = useState("");
  const [ToTokenAddress, setToTokenAddress] = useState("");
  const [FromAmount, setFromAmount] = useState("");
  const [ToAmount, setToAmount] = useState("");
  const [getLiquidityResponse, setgetLiquidityResponse] = useState(null);
  const [FromTokenAddressSWap, setFromTokenAddressSWap] = useState("");
  const [ToTokenAddressSwap, setToTokenAddressSwap] = useState("");
  const [FromAmountSwap, setFromAmountSwap] = useState(0);
  const [SwapInInterfaceResponse, setSwapInInterfaceResponse] = useState(null);

 
useEffect(() => {
  if (error !== null) {
    alert(error);
  }
}, [error]);

  async function runAuth() {
    const resp = await authWallet();
    if(resp?.status === true)
    {
      setAccount(resp?.account)
      setToken_address(resp?.token_address)
    }
    else
    {
      setError(resp?.account)
    }

  }

  useEffect(() => {
    runAuth();
  }, []);

  async function connect() {
    const resp = await connectWallet();
    if(resp?.status === true)
    {
      setAccount(resp?.account);
    }
    else
    {
      setError(resp?.account);
    }
  }

  async function disconnect() {
    const resp = await disconnectWallet();
    if(resp?.status === true)
      {
        setAccount(resp?.account);
      }
      else
      {
        setError(resp?.account);
      }
  }

  async function transaction() {
    const resp = await handleTransaction(amount,recAddress,Token_address);
    if(resp?.status === true)
      {
        setsendTransactionStatus(resp?.sendTransactionStatus);
      }
      else
      {
        setError(resp?.sendTransactionStatus);
      }
  }

  async function getTokenInfo() {
    const resp = await tokenInfo(TokenAddressInfo);
    if(resp?.status === true)
      {
        setTokenInfo(resp?.TokenInfo);
      }
      else
      {
        setTokenInfo(resp?.TokenInfo);
      }
  }

  async function getPawPriceFunc() {
    const resp = await getPawPrice();
    if(resp?.status === true)
      {
        setPawPrice(resp?.PawPrice);
      }
      else
      {
        setPawPrice(resp?.PawPrice);
      }
  }

  async function getMyTransactionCountFunc() {
    const resp = await getMyTrasanctionsCount(account);
    if(resp?.status === true)
      {
        setMyTransactionsCount(resp?.MyTransactionsCount);
      }
      else
      {
        setMyTransactionsCount(resp?.MyTransactionsCount);
      }
  }

  async function getTransactionReceptByIDFunc() {
    const resp = await getTrasanctionReceipt(TxID);
    if(resp?.status === true)
      {
        setTransactionReceipt(resp?.TransactionReceipt);
      }
      else
      {
        setTransactionReceipt(resp?.TransactionReceipt);
      }
  }

  async function getGetConnectWalletAddressFunc() {
    const resp = await getConnectedWalletAddress();
    if(resp?.status === true)
      {
        setConnectedWalletAddress(resp?.ConnectedWalletAddress);
      }
      else
      {
        setConnectedWalletAddress(resp?.ConnectedWalletAddress);
      }
  }

  async function getestimateProcessingFeeFunc() {
    const resp = await  estimateProcessingFee(estimateAmount,selectedFeeType,TokenAddressForEstimate,WalletAddressForEstimate);
    if(resp?.status === true)
      {
        setEstimateProcessingFee(resp?.EstimateProcessingFee);
      }
      else
      {
        setEstimateProcessingFee(resp?.EstimateProcessingFee);
      }
  }

  async function setPawNameFunc() {
    const resp = await  setPawName(PawNameValue,nameChandingAddress);
    if(resp?.status === true)
      {
        setPawNameResponse(resp?.PawNameResponse);
      }
      else
      {
        setPawNameResponse(resp?.PawNameResponse);
      }
  }

  async function getPawNameByAddressFunc() {
    const resp = await  getPawNameByAddress(GetPawNameValue);
    if(resp?.status === true)
      {
        setPawWalletName(resp?.PawWalletName);
      }
      else
      {
        setPawWalletName(resp?.PawWalletName);
      }
  }

  async function getPawAddressByNameFunc() {
    const resp = await  getPawAddressByName(GetPawAddressValue);
    if(resp?.status === true)
      {
        setPawWalletAddressByName(resp?.PawWalletName);
      }
      else
      {
        setPawWalletAddressByName(resp?.PawWalletName);
      }
  }

  async function getBlockNumberFunc() {
    const resp = await  getBlockNumber();
    if(resp?.status === true)
      {
        setBlockNumber(resp?.BlockNumber);
      }
      else
      {
        setBlockNumber(resp?.BlockNumber);
      }
  }

  async function getBlockNoFunc() {
    const resp = await  getBlock(Block_No);
    if(resp?.status === true)
      {
        setBlockNo(resp?.BlockNo);
      }
      else
      {
        setBlockNo(resp?.BlockNo);
      }
  }

  async function getSwapPriceFunc() {
    const resp = await getSwapPrice(TokenAddress1,TokenAddress2,Value);
    if(resp?.status === true)
      {
        setSwapPrice(resp?.swapPrice);
      }
      else
      {
        setSwapPrice(resp?.swapPrice);
      }
  }

  async function createWalletFunc() {
    const resp = await CreateWallet(walletPassword);
    if(resp?.status === true)
      {
        setCreateWalletResponse(resp?.createWalletResponse);
      }
      else
      {
        setCreateWalletResponse(resp?.createWalletResponse);
      }
  }

  async function getBalanceFunc() {
    const resp = await  getBalance(walletAddress);
    if(resp?.status === true)
      {
        setgetWalletPawBalanceResponse(resp?.PawBalance);
      }
      else
      {
        setgetWalletPawBalanceResponse(resp?.PawBalance);
      }
  }

  async function getTokenBalanceFunc() {
    const resp = await  getTokenBalance(BalanceWalletAddress,BalanceTokenAddress);
    if(resp?.status === true)
      {
        setgetTokenBalanceResponse(resp?.TokenBalance);
      }
      else
      {
        setgetTokenBalanceResponse(resp?.TokenBalance);
      }
  }

    async function getLedgersFunc() {
    const resp = await  getLedgers(LedgerWalletAddress);
    console.log(resp);
    if(resp?.status === true)
      {
        setgetLedgerResponse(resp?.ledgers);
      }
      else
      {
        setgetLedgerResponse(resp?.ledgers);
      }
  }

  async function addLiquidityFunc() {
    const resp = await  addLiquidity(FromTokenAddress,ToTokenAddress,FromAmount,ToAmount);
    if(resp?.status === true)
      {
        setgetLiquidityResponse(resp?.liquidity);
      }
      else
      {
        setgetLiquidityResponse(resp?.liquidity);
      }
  }

  async function swapInInterfaceFunc() {
    const resp = await  swapInInterface(FromTokenAddressSWap,ToTokenAddressSwap,FromAmountSwap);
    if(resp?.status === true)
      {
        //console.log(resp);
        setSwapInInterfaceResponse(resp?.pawSwapInInterfaceResponse);
      }
      else
      {
        //console.log(resp);
        setSwapInInterfaceResponse(resp?.pawSwapInInterfaceResponse);
      }
  }

Step 5

Add the below codes for the UI parts and the function usages

   <div
      style={{
        width: "500px",
        maxWidth: "500px",
        margin: "0 auto",
        padding: "20px",
        border: "1px solid #ddd",
        borderRadius: "8px",
        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
      }}
    >
      {/* Handle wallet  Connection  */}
      <div>
        {account ? (
          <div style={{ marginBottom: "20px" }}>
            <p>Connected account: {account}</p>
            <button
              onClick={() => disconnect()}
              style={{
                padding: "10px 20px",
                backgroundColor: "#007bff",
                color: "#fff",
                border: "none",
                borderRadius: "4px",
                cursor: "pointer",
                marginTop: "10px",
              }}
            >
              Disconnect Wallet
            </button>
          </div>
        ) : (
          <button
            onClick={() => connect()}
            style={{
              padding: "10px 20px",
              backgroundColor: "#007bff",
              color: "#fff",
              border: "none",
              borderRadius: "4px",
              cursor: "pointer",
              marginTop: "10px",
            }}
          >
            Connect Wallet
          </button>
        )}
        <br />
      </div>

      {/* handle send Transaction */}
      <div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Receiver Paw address
          </label>
          <input
            value={recAddress}
            onChange={(e) => setrecAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Amount
          </label>
          <input
            value={amount}
            onChange={(e) => setamount(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            transaction()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
          }}
        >
          Send Transaction
        </button>
        <br />
        <div
          style={{
            color: "#d9534f",
            fontWeight: "bold",
            marginBottom: "20px",
          }}
        >
          {sendTransactionStatus}
        </div>
      </div>

      {/* Token Data Handling  */}
      <div>
        <label>Token Info</label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Enter Token Address
          </label>
          <input
            value={TokenAddressInfo}
            onChange={(e) => setTokenAddressInfo(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() => getTokenInfo()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Token Info
        </button>
        <br />
        {TokenInfo && (
          <div style={{marginBottom: "20px",}}>
          Token Details :
          <img
            src={TokenInfo.img_path}
            alt="token"
            width={20}
            style={{
              padding: "2px",
              marginRight: "5px",
              backgroundColor: "black",
            }}
          />
          {TokenInfo.symbol}
        </div>
        )}
      </div>

      {/* Paw Price  */}
      <div>
        <label>Paw Price</label>
        <br />
        <button
          onClick={() => getPawPriceFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Paw Price
        </button>
        <br />
        {PawPrice && (<div style={{marginBottom: "20px",}}>
         Paw Price : {PawPrice}
        </div>)}
      </div>

      {/* My Transactions  */}
      <div>
        <label>Transaction Receipts</label>
        <br />
        <div style={{ marginTop: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Enter Transaction Hash
          </label>
          <input
            value={TxID}
            onChange={(e) => setTxID(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() => getTransactionReceptByIDFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Transactions Receipts
        </button>
        <br />
        {TransactionReceipt && (<div style={{marginBottom: "20px",}}>
         <br/>
            {TransactionReceipt?.tx_id} = {TransactionReceipt?.tx_type} : {TransactionReceipt?.status}            
        </div>)}
      </div>

      {/* Transaction Count*/}
      <div>
        <label>Transaction Count</label>
        <br />
        <button
          onClick={() => getMyTransactionCountFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Transactions Count
        </button>
        <br />
        {MyTransactionsCount && (<div style={{marginBottom: "20px",}}>
         Transaction Count :{MyTransactionsCount}
        </div>)}
      </div>

      {/* Connected Wallet Address*/}
      <div>
        <label> Connected Wallet Address</label>
        <br />
        <button
          onClick={() => getGetConnectWalletAddressFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
           Get Connected Wallet Address
        </button>
        <br />
        {ConnectedWalletAddress && (<div style={{marginBottom: "20px",}}>
         Address :{ConnectedWalletAddress}
        </div>)}
      </div>

      {/* Check Estimate Fee */}
      <div>
        <label> Check Estimate Fee </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Receiver Wallet Address
          </label>
          <input
            value={WalletAddressForEstimate}
            onChange={(e) => setWalletAddressForEstimate(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Token Address
          </label>
          <input
            value={TokenAddressForEstimate}
            onChange={(e) => setTokenAddressForEstimate(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Amount
          </label>
          <input
            value={estimateAmount}
            onChange={(e) => setestimateAmount(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div>
          <label 
          style={{
            display: "block",
            marginBottom: "5px",
            fontWeight: "bold",
            marginTop:"5px"
          }}>
            Select Fee Type</label>
          <select 
          id="feeTypeDropdown" 
          name="feeType"
          value={selectedFeeType}          
          style={{
            width: "90%",
            padding: "8px",
            border: "1px solid #ddd",
            borderRadius: "4px",
            marginBottom:"10px"
          }}
          onChange={(e)=>{
            setselectedFeeType(e.target.value);
          }}
          >
            {feeTypes.map((feeType, index) => (
              <option key={index} value={feeType}>
                {feeType}
              </option>
            ))}
          </select>
        </div>
        <button
          onClick={() =>
            getestimateProcessingFeeFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Check Estimate Fee
        </button>
        <br />
        {EstimateProcessingFee && (<div>
          Fee : {EstimateProcessingFee?.total}
          <br/>
          Gas Fee : {EstimateProcessingFee?.gasFee}
        </div>)}
      </div>

      {/* Set Paw Name */}
      <div>
        <label> Set Paw Name </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Name Changing Wallet Address
          </label>
          <input
            value={nameChandingAddress}
            onChange={(e) => setnameChandingAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Paw Name
          </label>
          <input
            value={PawNameValue}
            onChange={(e) => setPawNameValue(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            setPawNameFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Set Paw Name
        </button>
        <br />
        {PawNameResponse && (<div>
          Paw Name Response : {PawNameResponse}
        </div>)}
      </div>

      {/* Get Paw Name  */}
      <div>
        <label>Get Paw Name</label>
        <div>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
           Enter Paw Address
          </label>
          <input
            value={GetPawNameValue}
            onChange={(e) => setGetPawNameValue(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <br />
        <button
          onClick={() => getPawNameByAddressFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Paw Name
        </button>
        <br />
        {PawWalletName && (<div style={{marginBottom: "20px",}}>
          Paw Wallet Name : {PawWalletName?.wallet_name}
        </div>)}
      </div>

      {/* Get Paw Address By Name  */}
      <div>
        <label>Get Paw Address by Name</label>
        <div>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
           Enter Paw Name 
          </label>
          <input
            value={GetPawAddressValue}
            onChange={(e) => setGetPawAddressValue(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <br />
        <button
          onClick={() => getPawAddressByNameFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Paw Address By Name
        </button>
        <br />
        {PawWalletAddressByName && (<div style={{marginBottom: "20px",}}>
          Paw Wallet Address : {PawWalletAddressByName?.address}
        </div>)}
      </div>

      {/* get Block Number  */}
      <div>
        <label>get Block Number</label>
        <br />
        <button
          onClick={() => getBlockNumberFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Block Number
        </button>
        <br />
        {BlockNumber && (<div style={{marginBottom: "20px",}}>
          Block Number : {BlockNumber}
        </div>)}
      </div>

      {/* Get Block No */}
      <div>
        <label> Get Block No </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Block No
          </label>
          <input
            value={Block_No}
            onChange={(e) => setBlock_No(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            getBlockNoFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Get Block
        </button>
        <br />
        {BlockNo && (<div>
          Block : {BlockNo?.blockNo} - {BlockNo?.status}
        </div>)}
      </div>

      {/* Get Swap Price */}
      <div>
        <label> Get Swap Price </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Token Address 1
          </label>
          <input
            value={TokenAddress1}
            onChange={(e) => setTokenAddress1(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Token Address 2
          </label>
          <input
            value={TokenAddress2}
            onChange={(e) => setTokenAddress2(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Amount
          </label>
          <input
            value={Value}
            onChange={(e) => setValue(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            getSwapPriceFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Get Swap Price
        </button>
        <br />
        {SwapPrice && (<div>
          Swap Price : {SwapPrice}
        </div>)}
      </div>

            {/* Create Wallet */}
      <div>
        <label> Create Wallet </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter password for wallet
          </label>
          <input
            value={walletPassword}
            onChange={(e) => setwalletPassword(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            createWalletFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Create Wallet
        </button>
        <br />
        {CreateWalletResponse && (<div>
          Create Wallet Response : {CreateWalletResponse?.msg}
          <br/><br/>
          {CreateWalletResponse?.wallet ? (
            <div>
              Address : {CreateWalletResponse?.wallet?.address}<br/><br/>
              pKey : {CreateWalletResponse?.wallet?.pKey}<br/><br/>
            </div>
          ):""} 
          <br/>
          {CreateWalletResponse?.mnemonic ? (
            <div>
              Save This Word Phrases from 1 - 12 Orderly For Account Recovery
              {CreateWalletResponse?.mnemonic.map((item,index)=>{
                return <div key={index+1}>{item}</div>
              })}
            </div>
          ):""} 
        </div>)}
      </div>

            {/**Display Wallet QR code */}
      <div>
        <label> Wallet QR code </label>
        <br />
        <DisplayWalletQRCode pawWalletAddress={account}/>
      </div>

      {/* Get Balance */}
      <div>
        <label> Get Balance </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter Wallet Address
          </label>
          <input
            value={walletAddress}
            onChange={(e) => setwalletAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            getBalanceFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Get Balance
        </button>
        <br />
        {getWalletPawBalanceResponse && (<div>
          Wallet Paw Balance : {getWalletPawBalanceResponse}
        </div>)}
      </div>

      {/* Get Token Balance */}
      <div>
        <label> Get Token Balance </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter Wallet Address
          </label>
          <input
            value={BalanceWalletAddress}
            onChange={(e) => setBalanceWalletAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter Token Address
          </label>
          <input
            value={BalanceTokenAddress}
            onChange={(e) => setBalanceTokenAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            getTokenBalanceFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Get Token Balance
        </button>
        <br />
        {getTokenBalanceResponse && (<div>
          Token Balance : {getTokenBalanceResponse}
        </div>)}
      </div>

            {/* Get Ledgers */}
      <div>
        <label> Get Ledgers </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter Wallet Address
          </label>
          <input
            value={LedgerWalletAddress}
            onChange={(e) => setLedgerWalletAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            getLedgersFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
          Get Ledgers
        </button>
        <br />
        {getLedgerResponse !== null && (<div style={{ marginBottom: "10px" }}>
          Ledgers
          <br/>
          {getLedgerResponse.map((item,index)=>{
            return (
              <div>
                Type : {item?.token?.symbol}
                <br/>
                Token address : {item?.token_address}
                <br/>
                value : {item?.value}
              </div>
            )
          })}
        </div>)}
      </div>

      {/* Add Luiquidity */}
      <div>
        <label > Add Luiquidity </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter From Token Address
          </label>
          <input
            value={FromTokenAddress}
            onChange={(e) => setFromTokenAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter To Token Address
          </label>
          <input
            value={ToTokenAddress}
            onChange={(e) => setToTokenAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter From Amount
          </label>
          <input
            value={FromAmount}
            onChange={(e) => setFromAmount(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter To Amount
          </label>
          <input
            value={ToAmount}
            onChange={(e) => setToAmount(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            addLiquidityFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
         Add liquidity
        </button>
        <br />
        {getLiquidityResponse && (<div>
          Liquidity : {getLiquidityResponse}
        </div>)}
      </div>

             {/* Swap In Interface */}
       <div>
        <label > Swap In Interface </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter From Token Address To Swap
          </label>
          <input
            value={FromTokenAddressSWap}
            onChange={(e) => setFromTokenAddressSWap(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter To Token Address To Swap
          </label>
          <input
            value={ToTokenAddressSwap}
            onChange={(e) => setToTokenAddressSwap(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Enter From Amount To Swap
          </label>
          <input
            value={FromAmountSwap}
            onChange={(e) => setFromAmountSwap(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            swapInInterfaceFunc()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginBottom: "10px",
          }}
        >
         Swap In Interface
        </button>
        <br />
        {(<div>
          Swap In Interface Status : {SwapInInterfaceResponse}
        </div>)}
      </div>

    </div>

Usage Example code

This is the full code of the App.js.

import React, { useEffect, useState } from "react";
import {
  authWallet,
  connectWallet,
  disconnectWallet,
  handleTransaction,
  tokenInfo,
  getPawPrice,
  getTrasanctionReceipt,
  getMyTrasanctionsCount,
  getConnectedWalletAddress,
  estimateProcessingFee,
  setPawName,
  getPawNameByAddress,
  getPawAddressByName,
  getBlockNumber,
  getBlock,
  feeTypeData,
  getSwapPrice,
  CreateWallet,
  DisplayWalletQRCode,
  getBalance,
  getTokenBalance,
  getLedgers,
  addLiquidity,
  swapInInterface
} from "web3paw";

const App = () => {
  const [account, setAccount] = useState(null);
  const [Token_address, setToken_address] = useState(null);
  const [error, setError] = useState(null);
  const [sendTransactionStatus, setsendTransactionStatus] = useState(null);
  const [recAddress, setrecAddress] = useState("");
  const [amount, setamount] = useState("");
  const [TokenAddressInfo, setTokenAddressInfo] = useState("");
  const [TokenInfo, setTokenInfo] = useState(null);
  const [PawPrice, setPawPrice] = useState(null);
  const [TransactionReceipt, setTransactionReceipt] = useState(null);
  const [TxID, setTxID] = useState("");
  const [MyTransactionsCount, setMyTransactionsCount] = useState(null);
  const [ConnectedWalletAddress, setConnectedWalletAddress] = useState(null);
  const [EstimateProcessingFee, setEstimateProcessingFee] = useState(null);
  const [WalletAddressForEstimate, setWalletAddressForEstimate] = useState("");
  const [TokenAddressForEstimate, setTokenAddressForEstimate] = useState("");
  const [estimateAmount, setestimateAmount] = useState("");
  const [PawNameValue, setPawNameValue] = useState("");
  const [nameChandingAddress, setnameChandingAddress] = useState("");
  const [PawNameResponse, setPawNameResponse] = useState(null);
  const [GetPawNameValue, setGetPawNameValue] = useState("");
  const [GetPawAddressValue, setGetPawAddressValue] = useState("");
  const [PawWalletAddressByName, setPawWalletAddressByName] = useState(null);
  const [PawWalletName, setPawWalletName] = useState(null);
  const [BlockNumber, setBlockNumber] = useState(null);
  const [Block_No, setBlock_No] = useState("");
  const [BlockNo, setBlockNo] = useState(null);
  const feeTypes = Object.values(feeTypeData);
  const [selectedFeeType, setselectedFeeType] = useState("");
  const [TokenAddress1, setTokenAddress1] = useState("");
  const [TokenAddress2, setTokenAddress2] = useState("");
  const [Value, setValue] = useState("");
  const [SwapPrice, setSwapPrice] = useState(null);
  const [walletPassword, setwalletPassword] = useState("");
  const [CreateWalletResponse, setCreateWalletResponse] = useState(null);
  const [walletAddress, setwalletAddress] = useState("");
  const [getWalletPawBalanceResponse, setgetWalletPawBalanceResponse] = useState(null);
  const [BalanceWalletAddress, setBalanceWalletAddress] = useState("");
  const [BalanceTokenAddress, setBalanceTokenAddress] = useState("");
  const [getTokenBalanceResponse, setgetTokenBalanceResponse] = useState(null);
  const [LedgerWalletAddress, setLedgerWalletAddress] = useState("");
  const [getLedgerResponse, setgetLedgerResponse] = useState(null);
  const [FromTokenAddress, setFromTokenAddress] = useState("");
  const [ToTokenAddress, setToTokenAddress] = useState("");
  const [FromAmount, setFromAmount] = useState("");
  const [ToAmount, setToAmount] = useState("");
  const [getLiquidityResponse, setgetLiquidityResponse] = useState(null);
  const [FromTokenAddressSWap, setFromTokenAddressSWap] = useState("");
  const [ToTokenAddressSwap, setToTokenAddressSwap] = useState("");
  const [FromAmountSwap, setFromAmountSwap] = useState(0);
  const [SwapInInterfaceResponse, setSwapInInterfaceResponse] = useState(null);


  useEffect(() => {
    if (error !== null) {
      alert(error);
    }
  }, [error]);


  async function runAuth() {
    const resp = await authWallet();
    if(resp?.status === true)
    {
      setAccount(resp?.account)
      setToken_address(resp?.token_address)
    }
    else
    {
      setError(resp?.account)
    }

  }

  useEffect(() => {
    runAuth();
  }, []);

  async function connect() {
    const resp = await connectWallet();
    if(resp?.status === true)
    {
      setAccount(resp?.account);
    }
    else
    {
      setError(resp?.account);
    }
  }

  async function disconnect() {
    const resp = await disconnectWallet();
    if(resp?.status === true)
      {
        setAccount(resp?.account);
      }
      else
      {
        setError(resp?.account);
      }
  }

  async function transaction() {
    const resp = await handleTransaction(amount,recAddress,Token_address);
    if(resp?.status === true)
      {
        setsendTransactionStatus(resp?.sendTransactionStatus);
      }
      else
      {
        setError(resp?.sendTransactionStatus);
      }
  }

  async function getTokenInfo() {
    const resp = await tokenInfo(TokenAddressInfo);
    if(resp?.status === true)
      {
        setTokenInfo(resp?.TokenInfo);
      }
      else
      {
        setTokenInfo(resp?.TokenInfo);
      }
  }

  async function getPawPriceFunc() {
    const resp = await getPawPrice();
    if(resp?.status === true)
      {
        setPawPrice(resp?.PawPrice);
      }
      else
      {
        setPawPrice(resp?.PawPrice);
      }
  }

  async function getMyTransactionCountFunc() {
    const resp = await getMyTrasanctionsCount(account);
    if(resp?.status === true)
      {
        setMyTransactionsCount(resp?.MyTransactionsCount);
      }
      else
      {
        setMyTransactionsCount(resp?.MyTransactionsCount);
      }
  }

  async function getTransactionReceptByIDFunc() {
    const resp = await getTrasanctionReceipt(TxID);
    if(resp?.status === true)
      {
        setTransactionReceipt(resp?.TransactionReceipt);
      }
      else
      {
        setTransactionReceipt(resp?.TransactionReceipt);
      }
  }

  async function getGetConnectWalletAddressFunc() {
    const resp = await getConnectedWalletAddress();
    if(resp?.status === true)
      {
        setConnectedWalletAddress(resp?.ConnectedWalletAddress);
      }
      else
      {
        setConnectedWalletAddress(resp?.ConnectedWalletAddress);
      }
  }

  async function getestimateProcessingFeeFunc() {
    const resp = await  estimateProcessingFee(estimateAmount,selectedFeeType,TokenAddressForEstimate,WalletAddressForEstimate);
    if(resp?.status === true)
      {
        setEstimateProcessingFee(resp?.EstimateProcessingFee);
      }
      else
      {
        setEstimateProcessingFee(resp?.EstimateProcessingFee);
      }
  }

  async function setPawNameFunc() {
    const resp = await  setPawName(PawNameValue,nameChandingAddress);
    if(resp?.status === true)
      {
        setPawNameResponse(resp?.PawNameResponse);
      }
      else
      {
        setPawNameResponse(resp?.PawNameResponse);
      }
  }

  async function getPawNameByAddressFunc() {
    const resp = await  getPawNameByAddress(GetPawNameValue);
    if(resp?.status === true)
      {
        setPawWalletName(resp?.PawWalletName);
      }
      else
      {
        setPawWalletName(resp?.PawWalletName);
      }
  }

  async function getPawAddressByNameFunc() {
    const resp = await  getPawAddressByName(GetPawAddressValue);
    if(resp?.status === true)
      {
        setPawWalletAddressByName(resp?.PawWalletName);
      }
      else
      {
        setPawWalletAddressByName(resp?.PawWalletName);
      }
  }

  async function getBlockNumberFunc() {
    const resp = await  getBlockNumber();
    if(resp?.status === true)
      {
        setBlockNumber(resp?.BlockNumber);
      }
      else
      {
        setBlockNumber(resp?.BlockNumber);
      }
  }

  async function getBlockNoFunc() {
    const resp = await  getBlock(Block_No);
    if(resp?.status === true)
      {
        setBlockNo(resp?.BlockNo);
      }
      else
      {
        setBlockNo(resp?.BlockNo);
      }
  }

  async function getSwapPriceFunc() {
    const resp = await getSwapPrice(TokenAddress1,TokenAddress2,Value);
    if(resp?.status === true)
      {
        setSwapPrice(resp?.swapPrice);
      }
      else
      {
        setSwapPrice(resp?.swapPrice);
      }
  }

  async function createWalletFunc() {
    const resp = await CreateWallet(walletPassword);
    if(resp?.status === true)
      {
        setCreateWalletResponse(resp?.createWalletResponse);
      }
      else
      {
        setCreateWalletResponse(resp?.createWalletResponse);
      }
  }

  async function getBalanceFunc() {
    const resp = await  getBalance(walletAddress);
    if(resp?.status === true)
      {
        setgetWalletPawBalanceResponse(resp?.PawBalance);
      }
      else
      {
        setgetWalletPawBalanceResponse(resp?.PawBalance);
      }
  }

  async function getTokenBalanceFunc() {
    const resp = await  getTokenBalance(BalanceWalletAddress,BalanceTokenAddress);
    if(resp?.status === true)
      {
        setgetTokenBalanceResponse(resp?.TokenBalance);
      }
      else
      {
        setgetTokenBalanceResponse(resp?.TokenBalance);
      }
  }

    async function getLedgersFunc() {
    const resp = await  getLedgers(LedgerWalletAddress);
    console.log(resp);
    if(resp?.status === true)
      {
        setgetLedgerResponse(resp?.ledgers);
      }
      else
      {
        setgetLedgerResponse(resp?.ledgers);
      }
  }

  async function addLiquidityFunc() {
    const resp = await  addLiquidity(FromTokenAddress,ToTokenAddress,FromAmount,ToAmount);
    if(resp?.status === true)
      {
        setgetLiquidityResponse(resp?.liquidity);
      }
      else
      {
        setgetLiquidityResponse(resp?.liquidity);
      }
  }

  async function swapInInterfaceFunc() {
    const resp = await  swapInInterface(FromTokenAddressSWap,ToTokenAddressSwap,FromAmountSwap);
    if(resp?.status === true)
      {
        //console.log(resp);
        setSwapInInterfaceResponse(resp?.pawSwapInInterfaceResponse);
      }
      else
      {
        //console.log(resp);
        setSwapInInterfaceResponse(resp?.pawSwapInInterfaceResponse);
      }
  }

  return (
   <div
      style={{
        width: "500px",
        maxWidth: "500px",
        margin: "0 auto",
        padding: "20px",
        border: "1px solid #ddd",
        borderRadius: "8px",
        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
      }}
    >
      {/* Handle wallet  Connection  */}
      <div>
        {account ? (
          <div style={{ marginBottom: "20px" }}>
            <p>Connected account: {account}</p>
            <button
              onClick={() => disconnect()}
              style={{
                padding: "10px 20px",
                backgroundColor: "#007bff",
                color: "#fff",
                border: "none",
                borderRadius: "4px",
                cursor: "pointer",
                marginTop: "10px",
              }}
            >
              Disconnect Wallet
            </button>
          </div>
        ) : (
          <button
            onClick={() => connect()}
            style={{
              padding: "10px 20px",
              backgroundColor: "#007bff",
              color: "#fff",
              border: "none",
              borderRadius: "4px",
              cursor: "pointer",
              marginTop: "10px",
            }}
          >
            Connect Wallet
          </button>
        )}
        <br />
      </div>

      {/* handle send Transaction */}
      <div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Receiver Paw address
          </label>
          <input
            value={recAddress}
            onChange={(e) => setrecAddress(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Amount
          </label>
          <input
            value={amount}
            onChange={(e) => setamount(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() =>
            transaction()
          }
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
          }}
        >
          Send Transaction
        </button>
        <br />
        <div
          style={{
            color: "#d9534f",
            fontWeight: "bold",
            marginBottom: "20px",
          }}
        >
          {sendTransactionStatus}
        </div>
      </div>

      {/* Token Data Handling  */}
      <div>
        <label>Token Info</label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Enter Token Address
          </label>
          <input
            value={TokenAddressInfo}
            onChange={(e) => setTokenAddressInfo(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() => getTokenInfo()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Token Info
        </button>
        <br />
        {TokenInfo && (
          <div style={{marginBottom: "20px",}}>
          Token Details :
          <img
            src={TokenInfo.img_path}
            alt="token"
            width={20}
            style={{
              padding: "2px",
              marginRight: "5px",
              backgroundColor: "black",
            }}
          />
          {TokenInfo.symbol}
        </div>
        )}
      </div>

      {/* Paw Price  */}
      <div>
        <label>Paw Price</label>
        <br />
        <button
          onClick={() => getPawPriceFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Paw Price
        </button>
        <br />
        {PawPrice && (<div style={{marginBottom: "20px",}}>
         Paw Price : {PawPrice}
        </div>)}
      </div>

      {/* My Transactions  */}
      <div>
        <label>Transaction Receipts</label>
        <br />
        <div style={{ marginTop: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Enter Transaction Hash
          </label>
          <input
            value={TxID}
            onChange={(e) => setTxID(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <button
          onClick={() => getTransactionReceptByIDFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Transactions Receipts
        </button>
        <br />
        {TransactionReceipt && (<div style={{marginBottom: "20px",}}>
         <br/>
            {TransactionReceipt?.tx_id} = {TransactionReceipt?.tx_type} : {TransactionReceipt?.status}            
        </div>)}
      </div>

      {/* Transaction Count*/}
      <div>
        <label>Transaction Count</label>
        <br />
        <button
          onClick={() => getMyTransactionCountFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Get Transactions Count
        </button>
        <br />
        {MyTransactionsCount && (<div style={{marginBottom: "20px",}}>
         Transaction Count :{MyTransactionsCount}
        </div>)}
      </div>

      {/* Connected Wallet Address*/}
      <div>
        <label> Connected Wallet Address</label>
        <br />
        <button
          onClick={() => getGetConnectWalletAddressFunc()}
          style={{
            padding: "10px 20px",
            backgroundColor: "#007bff",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
           Get Connected Wallet Address
        </button>
        <br />
        {ConnectedWalletAddress && (<div style={{marginBottom: "20px",}}>
         Address :{ConnectedWalletAddress}
        </div>)}
      </div>

      {/* Check Estimate Fee */}
      <div>
        <label> Check Estimate Fee </label>
        <br />
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
              marginTop:"5px"
            }}
          >
            Receiver Wallet Address
          </label>
          <input
            value={WalletAddressForEstimate}
            onChange={(e) => setWalletAddressForEstimate(e.target.value)}
            style={{
              width: "90%",
              padding: "8px",
              border: "1px solid #ddd",
              borderRadius: "4px",
            }}
          />
        </div>
        <div style={{ marginBottom: "10px" }}>
          <label
            style={{
              display: "