With the Navcoin Wallet Chrome Extension, you can add Navcoin blockchain support to your applications running on the web.
When your web3 application loads, the wallet extension sends a message to your application about the wallet extension. So your application can check whether the extension is installed on the browser.
If the extension is not installed, you can ask your users to install the wallet extension. If the extension is already installed, you can request access for your decentralized application.
Include web3.js
file in your app.
<script src="web3.js"></script>
Initalize a variable for Web3 to start interacting with the wallet extension.
var Web3 = new Web3SDK({
"network":"testnet",
"log":false
});
Add a event listener for checking Web3 successfully loaded.
window.addEventListener("sdk_loaded", function(e)
{
console.log("Navcoin Web3 SDK loaded on ", e.detail.network);
});
Add a event listener for checking wallet extension is installed on user's browser.
window.addEventListener("extension_found", function(e)
{
console.log("Extension version : ", e.detail.version);
console.log("Is connected : ", e.detail.connected);
console.log("Address : ", e.detail.address);
});
After making sure that the wallet extension is installed, you can make a connection request to the wallet with the code below.
Web3.Connect();
After the connection request to the wallet is made, the user's wallet is displayed on the screen and access permission is requested for your application.
If the connection request is approved by the wallet owner, the following javascript function will be triggered on your app.
function accept_connection(address)
{
console.log("accept connection : " + address);
}
If the connection request is rejected, the following javascript function will be triggered on your app.
function reject_connection()
{
console.log("connection request rejected");
}
You can create Private NFT collections in your web3 application and then mint NFTs in the NFT collections you create. You can also access the data of the NFT collections in the wallet.
For a request to create an NFT collection on the wallet, you can provide basic information such as the collection name, scheme and maximum supply and pass it to the wallet.
let scheme=JSON.stringify({
"version": 1,
"category": "art",
"description": "Collection Description",
"image": "ipfs://QmUkqNpMQ5PX84YwMEhVArhfeiwajyihseXoEMh2K8b1PC",
"external_url": "https://www.url.com",
"attributes":
{
"thumbnail_url": "ipfs://QmUkqNpMQ5PX84YwMEhVArhfeiwajyihseXoEMh2K8b1PC",
"content_type": "image/png"
}
});
Web3.CreateNftCollection({
name:"Collection Name",
scheme:scheme,
max_supply:100
});
If the NFT collection creation request is accepted by the wallet owner and the NFT collection is successfully created on the blockchain, the following function will be triggered on your app.
function create_nft_collection(result)
{
console.log("create nft collection -> " + result);
}
Before you can mint an NFT, you must first create an NFT collection as explained in the previous topic.
After you create your NFT collection, you can pass the data containing the basic information about the NFT you want to mint to the wallet.
let scheme=JSON.stringify({
"version": 1,
"category": "art",
"sub_category": null,
"name": "NFT Name",
"description": "NFT Description",
"image": "ipfs://QmVVPLdohygxBfRmAuFgRsdDoCCWjG7L9w3pMmYrzkubcA",
"external_url": "https://www.url.com/0",
"attributes":
{
"thumbnail_url": "ipfs://QmVVPLdohygxBfRmAuFgRsdDoCCWjG7L9w3pMmYrzkubcA",
"content_type": "image/png",
"family_id": "0"
}
});
Web3.CreateNft({
token_id:"f0006b0eb29b3b7e6306212ad6b105d4a362300d98f68613139a97bcde90ac42",
nft_id:0,
scheme:scheme
});
If the NFT mint request is accepted by the wallet owner and the NFT is successfully minted on the blockchain, the following function will be triggered on your app.
function create_nft(result)
{
console.log("create nft -> " + result);
}
You can use the code below to access the NFT collections and NFT metadata in the wallet.
Web3.ListNftCollections();
After the request is passed to the wallet, the NFT collection data on the wallet can be obtained with the following function.
function list_nft_collections(collections)
{
console.log(collections);
}
You can use the example code below to create a sell order for an NFT on the wallet.
Web3.CreateNftSellOrder({
return_order:true,
submit_order:false,
token_id:'token_id_here',
nft_id:0,
price:10
});
After the request is passed to the wallet, the result for create nft sell order can be obtained with the following code.
function accept_create_nft_sell_order(result)
{
console.log("create nft sell order -> " + result);
}
If you want to cancel an NFT sell order that you have created on the marketplace, you can use the sample code below.
Web3.CancelNftSellOrder(
{
token_id:"token_id_here",
nft_id:0
});
If the wallet owner approves the NFT sale cancellation request, the following method will be triggered.
function accept_cancel_nft_order()
{
console.log("accept cancel nft order");
}
You can use the example code below if you want to send a request to the wallet to accept a specified NFT sell order.
Web3.AcceptOrder({
order:order_object
});
You can create your own private token by specifying a name, token, and total supply.
let name="XSI Token";
let symbol="XSI";
let max_supply=100000000;
Web3.CreatePrivateToken({
name:name,
symbol:symbol,
max_supply:max_supply
});
After the request is approved on the wallet, the following function will be triggered on your app.
function accept_create_private_token(tx)
{
console.log("accept create private token");
console.log(tx);
}
You can use the example below to mint your private tokens that you have created before.
let token_id="token_id_here";
let amount="1000";
Web3.MintPrivateToken({
token_id:token_id,
amount:amount
});
After the request is approved on the wallet, the following function will be triggered on your app.
function accept_mint_private_token(tx)
{
console.log("mint create private token");
console.log(tx);
}
You can request a transaction from the wallet by entering a recipient address and amount.
let address="xNTVnRrBYbkYABv4kXN6CsYkdQFSDZdMvFXPcPTG3AYwYB1CR45iuiDgHYtNBXPjHdpYA4CMtAsuJh9SDU1SDQAeMWuUYsPM9eFfD9KhMDwastyeGZiBQw9ZcdKb18hHMvC2Z97mwa4";
let amount=1;
Web3.CreateTransaction({
address:address,
amount:amount
});
The following method will be triggered when your transaction request is approved by the wallet owner.
function accept_create_transaction(tx)
{
console.log(tx);
}
You can ensure that a message you specify is signed by the wallet.
let message="this is the message!";
Web3.SignMessage({
message:message
});
The following method will be triggered when your message sign request is approved by the wallet owner.
function accept_sign_message(signed_message,address)
{
console.log(signed_message);
console.log(address);
}
Sample project developed with VueJS
https://github.com/navcoin/web3-dapp-sample-project
https://priverse.org/projects/web3-dapp-sample-project/index.html