Outdated: The new tutorial can be found at the embark website (Disclaimer: this tutorial is for educational purposes only) In we deployed and interacted with a single Token. In this article we will continue by adapting the previous to create a true factory so new tokens can be dynamically deployed on the application side. part 1 DApp A Token is typically a unit used to represent a medium of exchange for some service or utility. They can represent a concert ticket, a membership, voting share, reputation points, etc… note: This tutorial is meant for embark 2.5.2 (not 2.6.0 and above) Getting Started For the second part of the tutorial, 2.5.2 is required. Embark If you are using an older version you can update with: npm install -g embark@2.5.2 Afterwards make sure that returns then restart embark with embark version 2.5.2 embark run Generalizing Token Interaction We’ll start by generalizing the previous UI so we can input the address of a ERC20 Token and interact with it. First, we’ll add a simple form to to get address of the token we wish to interact with. app/index.html <html><head><title>Embark</title><link rel="stylesheet" href="css/app.css"><script src="js/app.js"></script></head><body><h3>Welcome to Embark!</h3><p>See the <a href=" ">Wiki</a> to see what you can do with Embark!</p> https://github.com/iurimatias/embark-framework/wiki **<div id="useToken"> <h3>Token Address</h3> <input placeholder="enter token address" /> <button>Use this Token</button> <div class="result"></div> </div>** <div id="queryBalance"> <h3>Query Balance</h3> <input placeholder="enter account address: e.g 0x123" /> <button>Query</button> <div class="result"></div> </div> <div id="transfer"> <h3>Transfer Tokens</h3> <input class="address" placeholder="enter account address: e.g 0x123" /> <input class="num" placeholder="enter amount to transfer" /> <button>Transfer</button> <div class="result"></div> </div> </body></html> In we’ll get the address given in the input, initialize a new contract object for that address and the Token , and then assign it to a variable. We’ll also update the rest of code to use instead of This way the existing code will work with the token we will be loading. app/js/token.js ABI currentToken Token. $(document).ready(function() { var currentToken; $("#useToken button").click(function() {var address = $('#useToken input').val(); **currentToken = new EmbarkJS.Contract({ abi: Token.abi, address: address }); });** web3.eth.getAccounts(function(err, accounts) {$('#queryBalance input').val(accounts[0]);}); $('#queryBalance button').click(function() {var address = $('#queryBalance input').val(); **currentToken**.balanceOf(address).then(function(balance) { $('#queryBalance .result').html(balance.toString()); }); }); $('#transfer button').click(function() {var address = $('#transfer .address').val();var num = $('#transfer .num').val(); **currentToken**.transfer(address, num).then(function() { $('#transfer .result').html('Done!'); });; }); }); Now you can input the address of an existing token in chain, and interact with it. For instance, checking the embark dashboard. I can see the address of the deployed token in my case is _0x0703da89fc6c3ff20b8787a23d3340b41258dba7. C_opy paste your equivalent address into the UI. Note: There are several ways to copy the address, in most systems pressing the ALT key while dragging with the mouse will enable text selection in the console, followed by CMD+C or right-click->copy. Alternatively you can also go to your DApp at http://localhost:8000 and type Token.address in the browser dev tools. After copying the address, click “Use this Token’, and let’s see the balance. It’s as expected ( was the initial supply as configured in and was transferred out in part 1) 980 1000 config/contracts.json 20 Deploy New Tokens on the fly Now that we have an UI to interact with an existing Token given its address, we’ll add functionality to deploy tokens on the fly, each with their own initial supply. First we’ll add a simple form to to get the desired supply of the new token to deploy. app/index.html <html><head><title>Embark</title><link rel="stylesheet" href="css/app.css"><script src="js/app.js"></script></head><body><h3>Welcome to Embark!</h3><p>See the <a href=" ">Wiki</a> to see what you can do with Embark!</p> https://github.com/iurimatias/embark-framework/wiki **<div id="deployToken"> <h3>Deploy new Token</h3> <input placeholder="enter token supply" /> <button>Deploy</button> <div class="result"></div> </div>** <div id="useToken"> <h3>Token Address</h3> <input placeholder="enter token address" /> <button>Use this Token</button> <div class="result"></div> </div> <div id="queryBalance"> <h3>Query Balance</h3> <input placeholder="enter account address: e.g 0x123" /> <button>Query</button> <div class="result"></div> </div> <div id="transfer"> <h3>Transfer Tokens</h3> <input class="address" placeholder="enter account address: e.g 0x123" /> <input class="num" placeholder="enter amount to transfer" /> <button>Transfer</button> <div class="result"></div> </div> </body></html> Embark makes the contract objects available in the js side, each contract object will a method called that can deploy new instances of the contract. This method can take parameters for the contract, and it will return a promise containing a contract object of the deployed contract.In we’ll add the code to deploy new tokens client side using this functionality: deploy app/js/token.js $(document).ready(function() { var currentToken; $("#deployToken button").click(function() {var supply = $('#deployToken input').val(); **Token.deploy(\[supply\]).then(function(deployedToken) { currentToken = deployedToken; $("#deployToken .result").append("<br>Token deployed with address: " + deployedToken.address); });** }); $("#useToken button").click(function() {var address = $('#useToken input').val(); currentToken = new EmbarkJS.Contract({ abi: Token.abi, address: address }); }); web3.eth.getAccounts(function(err, accounts) {$('#queryBalance input').val(accounts[0]);}); $('#queryBalance button').click(function() {var address = $('#queryBalance input').val(); currentToken.balanceOf(address).then(function(balance) { $('#queryBalance .result').html(balance.toString()); }); }); $('#transfer button').click(function() {var address = $('#transfer .address').val();var num = $('#transfer .num').val(); currentToken.transfer(address, num).then(function() { $('#transfer .result').html('Done!'); });; }); }); When the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with . The resulting promise will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one and also inform the user of the address; Token.deploy([supply]) .then(function(deployedToken) {}) currentToken So let’s try this out! Entering the supply as and clicking Deploy: 500 Perfect! Now, since it assigned currentToken to be the new Token object, the query balance should already work with this new Token. It returns 500 as expected! Let’s deploy another token with a different supply and check Query balance again: After deploying a new token with the supply at clicking query is also returning as expected. 200, 200 Let’s switch back to the first deployed token with “Use this Token” functionality to see if everything is working as expected.Each time we are deploying a token in the client, the DApp is informing us “Token deployed with address: 0x…”, so let’s use this to copy paste the address of the first deployed contract into the Token Address field, then click “Use this Token” to switch back to that token. Now checking the balance again: And it’s as expected since that’s the initial supply defined for the first token deployed. 500 Disabling the Token Deploy from Embarks side Now that your DApp can deploy Tokens on the fly, It’s unnecessary for Embark to deploy the Token contract like it did in Part 1, however you still need Embark to make the Token contract available on the client side.To achieve this, go to and set for that contract config/contracts.json "deploy": false {"default": {"gas": "auto","contracts": {"Token": { "args": [1000]}}}} "deploy": false, Embark will now no longer deploy that contract, in the dashboard you should see: The contract object however will still be available in your DApp and the client side deployment will work as before. Token Conclusion In part 1 we deployed and interacted with single Token. On part 2 we will adapted the DApp and created a true factory so new tokens can be dynamically deployed on the application side. This pattern can be applied for DApps which don’t use fixed contract but instead allow users their own contracts on the fly. These tutorials will continue! Next time we’ll learn how do DApps that integrate Ethereum and IPFS using Embark, until next time! Donations: If you like this article please consider donating to 0x8811FdF0F988f0CD1B7E9DE252ABfA5b18c1cDb1 (ETH)
