Create proposal Widget

Create Proposal Widget is an add on available with gbapi, which can be imported in any application. It provides an interface for creating proposal in dApp, which is registered in GovBlocks Network. It makes use of GovBlocks protocol JS in background for creating proposal.

Steps to integrate Widget

1) Install the GovBlocks Protocol JS (no need of importing and initializing)

2)Import the bundle.js to your index.html file

<script type="text/javascript" src="node_modules/govblocksjs/bundle.js"></script>

Now import createProposalWidget JS by using any of the below methods, which ever suits your application.

<script type="text/javascript" src="node_modules/govblocksjs/createProposalAPI.js" ></script>
import {createProposalGB} from 'govblocksjs/createProposalAPI';

For React based applications no need to import the bundle.js. Importing createProposalWidget JS itself works.

3)Now create a HTML element of format mentioned below class : "createProposalGB", id : {dAppName}_{subcategory-id}, name : {Name of the button to display} dAppName is the name of dApp registered in GovBlocks Network subcategory Id is the id of sub category under which proposal should be created.

<span class="createProposalGB" id="NEXUS-MUTUAL_10" name="Transfer Tokens" onclick="createProposal()" ></span>

It will create a button of given name as shown below image, which on click opens the pop up

4)Now write a function which executes on clicking the created button, and call createProposalGB function which will available with createProposalAPI.js.

createProposal(){
var json ={"name":"value"};
createProposalGB(json,element id);
}

Arguments to the function: If you wish to pass the default parameter values for creating proposal, pass them in a JSON with parameter name as key and parameter value as value, else pass an empty JSON. Second argument is the id of created HTML element. Example:

createProposal(){
var json = {"Amount":50};
createProposalGB(json,"NEXUS-MUTUAL_10");
}

Now the value of parameter "Amount" will be default, with value passed through the function call.

5)By clicking create proposal button, user need to confirm a metamask transaction after which a proposal will be created in dApp,which can be viewed through GovBlocks browser. https://demo.govblocks.io/components/all-proposals/<Your_dAppName>