11 KiB
title: How to create a Token Factory with Ethereum — Part 2 author: iuri_matias summary: "In this second part, we'll continue where we left off in part one, on building a token factory with Embark and focus on how to deploy new tokens." categories:
- tutorials alias:
- "tutorials/token_factory_2.html"
- "/news/2018/10/26/how-to-create-a-token-factory-with-embark-part-2/" layout: blog-post
In part 1 we deployed and interacted with a single Token. In this article we will continue by adapting the previous DApp to create a true factory so new tokens can be dynamically deployed on the application side.
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…
Getting Started
For the second part of the tutorial, Embark 3.0 or higher is required.
If you are using an older version you can update with:
{% code_block copyBtn:true %} $ npm install -g embark@3 {% endcode_block %}
Afterwards make sure that embark version returns 3.0 then restart embark with 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 app/index.html to get address of the token we wish to interact with.
{% code_block copyBtn:true %}
<html> <head> </head>Welcome to Embark!
See the Wiki to see what you can do with Embark!
Token Address
Use this TokenQuery Balance
Query<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>
In app/js/index.js we’ll get the address given in the input, initialize a new contract object for that address and the Token ABI, and then assign it to a variable. We’ll also update the rest of code to use currentToken instead of Token. This way the existing code will work with the token we will be loading.
{% code_block copyBtn:true %} import EmbarkJS from 'Embark/EmbarkJS'; import $ from 'jquery'; import Token from 'Embark/contracts/Token';
let currentToken;
$(document).ready(function() { $("#useToken button").click(function() { var address = $('#useToken input').val(); currentToken = new EmbarkJS.Contract({ abi: Token.options.jsonInterface, address: address }); }); web3.eth.getAccounts(function(err, accounts) { $('#queryBalance input').val(accounts[0]); });
$('#queryBalance button').click(function() { var address = $('#queryBalance input').val(); currentToken.methods.balanceOf(address).call().then(function(balance) { $('#queryBalance .result').html(balance.toString()); }); });
$('#transfer button').click(function() { var address = $('#transfer .address').val(); var num = $('#transfer .num').val(); currentToken.methods.transfer(address, num).send().then(function() { $('#transfer .result').html('Done!'); });; });
}); {% endcode_block %}
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. Copy paste your equivalent address into the UI.
{% notification info 'Copying the address' %} 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. {% endnotification %}
After copying the address, click “Use this Token’, and let’s see the balance.
It’s 980 as expected (1000 was the initial supply as configured in config/contracts.json and 20 was transferred out in part 1
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 app/index.html to get the desired supply of the new token to deploy.
{% code_block copyBtn:true %}
<html> <head> </head>Welcome to Embark!
See the Wiki to see what you can do with Embark!
Deploy new Token
DeployToken Address
Use this Token<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>
Embark makes the contract objects available in the js side, each contract object will have a method called deploy 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 app/js/index.js we’ll add the code to deploy new tokens client side using this functionality:
{% code_block copyBtn:true %} $(document).ready(function() {
var currentToken;
$("#deployToken button").click(function() {
var supply = $('#deployToken input').val();
Token.deploy({arguments: [supply], data: Token.options.data}).send({gas: 400000}).then(function(deployedToken) {
currentToken = deployedToken;
$("#deployToken .result").append("
Token deployed with address: " + deployedToken.options.address);
});
});
$("#useToken button").click(function() {
var address = $('#useToken input').val();
currentToken = new EmbarkJS.Contract({
abi: Token.options.jsonInterface,
address: address
});
});
web3.eth.getAccounts(function(err, accounts) { $('#queryBalance input').val(accounts[0]); });
$('#queryBalance button').click(function() { var address = $('#queryBalance input').val(); currentToken.methods.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.methods.transfer(address, num).then(function() { $('#transfer .result').html('Done!'); });; });
}); {% endcode_block %}
When the Deploy button is clicked, we’ll get the supply entered and deploy a new Token with Token.methods.deploy([supply]).
The resulting promise .then(function(deployedToken) {}) will contain the contract object of newly deployed contract. We’ll assign this new token object to the current one currentToken and also inform the user of the address;
So let’s try this out! Entering the supply as 500 and clicking Deploy:
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 200, clicking query is also returning 200 as expected.
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 500 as expected since that’s the initial supply defined for the first token deployed.
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 config/contracts.js and set "deploy": false for that contract
{% code_block copyBtn:true %} module.exports = { "default": { // ..... "gas": "auto", "contracts": { "Token": { "deploy": false, "args": [ 1000 ] } } // ..... } } {% endcode_block %}
Embark will now no longer deploy that contract, in the dashboard you should see:
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.