web3paw
v1.3.0
Published
paw wallet package
Downloads
72
Maintainers
pawchainReadme
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: "