Full-stack smart contract development

Writing, testing and deploying an Ethereum smart contract and its web interface This weekend I spent some time with my team looking into tooling and deployments particular to the Ethereum blockchain, and put together a little experiment: . Forever on the Chain It’s the equivalent of a digital tattoo: a smart contract that anyone can use for free (minus transaction costs) to leave a permanent message onto the Ethereum blockchain. This message is stored in the blockchain forever, etched into thousands upon thousands of computers, unchangeable and immortal. Even though permanence is one of the core blockchain concepts, this still worried some folks, so I also wrote a . non-technical post about the tool and some of the implications of blockchain technology What follows is a smart contract tutorial. I’ll walk you through the creation and testing of the critical path of this tool. This assumes you have an understanding of some Ethereum core concepts such as smart contracts, transactions, and gas. If you don’t, here’s an explainer to get you started. _Introduction_medium.com How does Ethereum work, anyway? The smart contract This smart contract is as simple as they come. Its only functionality is to log a message into the blockchain. This is achieved through the use of Events, as explained below. Code walkthrough The smart contract is written in Solidity. This is a statically typed language to write Ethereum smart contracts. From : the documentation Solidity is a contract-oriented, high-level language whose syntax is similar to that of JavaScript and it is designed to target the Ethereum Virtual Machine (EVM). Here’s what the implementation of our contract looks like. pragma solidity 0.4.24; /*** Recorder — record a message into the blockchain* uthor Life on Mars — https://lifeonmars.pt*/contract Recorder{event Record(address _from,string _message); @title @a /*** otice Sends the contract a message* to record into the blockchain* message message to record*/function record(string message) public {emit Record(msg.sender, message);}} @n @param Let’s start by walking slowly through this code. pragma solidity 0.4.24; As per : the documentation Source files can (and should) be annotated with a so-called version pragma to reject being compiled with future compiler versions that might introduce incompatible changes. This line ensures that your source file won’t be compiled by a compiler with a version different from 0.4.24. It’s also possible to use less restrictive pragmas, for example through a caret range. Take . In this case, your source will be compiled by any compiler later than , and earlier than See the for more information. ^0.4.24 0.4.24 0.5.0. semver documentation for npm contract Recorder {} is, as the name implies, the keyword one uses to define a contract. A contract is defined with a name written in . contract PascalCase event Record(address _from,string _message); Here, we’re defining an event. Events allow you write access to the Ethereum logging facilities. When called, the arguments they were invoked with get stored in the transaction’s log, which is a special data structure in the blockchain [ ]. These transaction logs can be used for storing information. docs Compared to using contract storage (writing to a variable in a contract), using logs is much cheaper with regards to gas costs. However, this comes with a trade-off: contracts aren’t able to read from log data ( ). see this great post by Consensys for more details Since, for our use case, we don’t need contracts to read from these logs, we’re using events instead of storing an array of strings. function record(string message) public {Record(msg.sender, message);} The method is as simple as they come. It’s a method, . It takes a argument named , and all it does is call the event with two parameters: record public meaning it can be called externally string message Record holds the address of the account which invoked the function [ ]; msg.sender record docs is just the argument was invoked with. message record Interaction with this particular smart contract is possible in only one way: sending a transaction at it, along with a parameter, which invokes the method. When an account invokes the method, the event is called, which causes the tuple to be stored in the respective transaction’s log. message record A record Record {A's address, message} Compilation Solidity code can be compiled using , the solidity commandline compiler. We will see how to use for compilation and deployment later on, but bear with me for now. solc Truffle Install solc if you want to follow along. Running allows us to output the binary representation of the contract. This is used for deploying the contract (again, Truffle will handle this for us later). Here’s what this contract’s binary output looks like (you can see it yourself with ) solc solc --bin Recorder.sol 6060604052341561000f57600080fd5b6101a28061001e6000396000f300606060405260043610610041576000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff168063e51ace1614610046575b600080fd5b341561005157600080fd5b6100a1600480803590602001908201803590602001908080601f016020809104026020016040519081016040528093929190818152602001838380828437820191505050505050919050506100a3565b005b7fac0fdae5d3299ac82cf049834f149484c5cafb1584ffd1e2432597e4581b16a73382604051808373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200180602001828103825283818151815260200191508051906020019080838360005b8381101561013857808201518184015260208101905061011d565b50505050905090810190601f1680156101655780820380516001836020036101000a031916815260200191505b50935050505060405180910390a1505600a165627a7a723058201b9ef174b2b5557ad31400e4eb1cd02dd02b8244eefbc97e9b75b01072cc706e0029 Pretty exciting stuff. As per the : official documentation The encoding is not self describing and thus requires a schema in order to decode. What this means is that, if we are to be able to understand and interact with a contract, we need to know its . An ABI (Application Binary Interface) is the interface specification of a program. ABI specification Here’s what that specification looks like for this contract (you can see it yourself by ). solc --abi Recorder.sol [{"constant": false,"inputs": [{"name": "message","type": "string"}],"name": "record","outputs": [],"payable": false,"stateMutability": "nonpayable","type": "function"},{"anonymous": false,"inputs": [{"indexed": false,"name": "_from","type": "address"},{"indexed": false,"name": "_message","type": "string"}],"name": "Record","type": "event"}] This ABI spec will become relevant later on. Natspec The compiler can also produce documentation based on your use of . This can be used by UIs to display additional information to users and/or developers. This contract has such comments for itself and also for its method. Ethereum’s Natural Specification Format, or Natspec record Here’s the compile output. “devdoc”: {“author”: “Life on Mars — ",“methods”: {“record(string)”: {“params”: {“message”: “ — message to record”}}},“title”: “Recorder — record a message into the blockchain”},“userdoc”: {“methods”: {“record(string)”: {“notice”: “Sends the contract a message to record into the blockchain”}}} https://lifeonmars.pt I wanted to show you these internals, but we’ll be using Truffle from now on. Truffle is a framework for Ethereum, with a few niceties that’ll make our life easier. In our case, it’ll help with compilation and testing. You’ll need Truffle in order to follow along the next sections, so please follow the instructions to install it . Deploying and testing the contract on a local network In order to test and deploy the contract, we’ll need an Ethereum client running. We’ll get started with , which simulates the behaviour of a real client (such as , which we’ll look into later on), but it’s much faster. This speed contributes to faster development and testing cycles. Ganache CLI geth As per the instructions, install it with **npm install -g ganache-cli** and run it with **ganache-cli** . Now, create a new directory, into it, and run . We’ll need to configure Truffle to connect to . Edit the file as follows: recorder cd truffle init ganache-cli truffle.js ℹ️ truffle.js------------- module.exports = {networks: {development: {host: "localhost",port: 8545,network_id: "*",gas: 4712387,}}}; Next, create a file where you’ll store the contract’s source code, shown above. contracts/Recorder.sol Then create the as such: migrations/2_deploy_contracts.js ℹ️ migrations/ ----------------------------------- 2_deploy_contracts.js var Recorder = artifacts.require("./Recorder.sol"); module.exports = function(deployer) {deployer.deploy(Recorder);}; Now we’re ready to open the , where we’ll get Truffle to deploy the Recorder contract into the network through . Truffle will make sure to compile your contract automatically for you. truffle console migrate --reset (By the way, tells truffle to . For the purposes of this post, we’re not interested in using migrations for contract versioning, so we’ll always use it to start the process anew.) --reset run all the migrations from the beginning Once the contract is deployed, we’re ready to use it! We’ll store a couple of records and then proceed to query them. We can call methods on contracts by acquiring a contract reference and calling the method directly on it: ℹ️ truffle console----------------- truffle(development)> recorder = Recorder.at(Recorder.address)truffle(development)> recorder.record("first message");truffle(development)> recorder.record("second message"); Note the output. Among other things, it’ll tell you how much gas was used up to run this transaction. ganache-cli ℹ️ ganache-cli output----------------- eth_sendTransaction Transaction: 0x118de578d3bcbd9474099e5385b0a883ad18eaa99319f710f641db1cc6b2e8feGas usage: 24577Block Number: 14Block Time: Fri Nov 10 2017 20:06:42 GMT+0000 (WET) eth_getTransactionReceipt In order to read what was written earlier, we’ll need to run the following. ℹ️ truffle console------------------ truffle(development)> recorder.Record({}, {fromBlock: 0, toBlock: "latest"}).get((error,result) => (console.log(result.map((result) => (result.args._message))))) Note how we invoked . The first argument is used for filtering the results, which is outside the scope of this post. The second one is how we specify which block span we’ll be looking for the transaction logs for . Record({}, {fromBlock: 0, toBlock: "latest"}) Record The method takes a callback, and we’re just ping over the the returned result to get to the value of each result. get map args._message If this all worked out, you should see your console output the following. ℹ️ truffle console------------------ truffle(development)> [ 'first message', 'second message'] And that’s it! Your contract is deployed, you’ve used it to write messages into the chain, and you then queried it to get those messages back. Testing Before we try this on real networks, let’s look into testing the contract first. Truffle uses the testing framework, and for assertions. We’ll be using the following test. Mocha Chai ℹ️ test/recorder.js------------------- var Recorder = artifacts.require("Recorder"); contract('Recorder', function(accounts) {it("records event", function(done) {Recorder.deployed().then(function (instance) {instance.Record({}, {fromBlock: 0, toBlock: "latest"}).get(function (error, events) {assert.equal(0,events.length,"There should be no events at start.");instance.record("pokemon").then(function () {instance.Record({}, {fromBlock: 0, toBlock: "latest"}).get(function (error, events) {assert.equal(1,events.length,"There should be one event after recording.");done();});});});});});}); It looks ugly, but it’s pretty simple as far as tests go: resolves when it gets a hold of the deployed Recorder instance Recorder.deployed() we use first, to get the list of messages written to it instance.Record(...).get() we check that it has no messages, with assert.equal(0, events.length) we then write one message with instance.record("pokemon") and finally, we ensure the message was written, with assert.equal(1, events.length) Create a file in the directory called and paste the test into it. You can run this test by exiting the console and simply typing into your shell. Note that truffle deploys the contract anew every time you run a test file. See for more details. tests recorder.js truffle test the documentation ℹ️ truffle test output---------------------- Using network 'development'. Contract: Recorder✓ records event (101ms) 1 passing (115ms) Success! Connecting to a real network You can now legitimately say that . Not good enough? Let’s try and get this to work on an actual Ethereum network. it works on my machine Before we deploy into the actual , let’s use a first. A testnet is an Ethereum network analog, supported by real nodes, but used mostly for testing. As such, testnets aren’t used for anything serious and the Ether therein shouldn’t hold any value. We’ll be using the . This will allow us to use a to dig for our contract and transactions on the network. mainnet testnet Ropsten testnet block explorer Then we’ll sync up with Ropsten ( ). Install geth as per the instructions . more instructions ℹ️ shell-------- $ geth --testnet --fast --bootnodes "enode://20c9ad97c081d63397d7b685a412227a40e23c8bdc6688c6f37e97cfbc22d2b4d1db1510d8f61e6a8866ad7f0e17c02b14182d37ea7c3c8b9c2683aeb6b733a1@52.169.14.227:30303,enode://6ce05930c72abc632c58e2e4324f7c7ea478cec0ed4fa2528982cf34483094e9cbc9216e7aa349691242576d552a2a56aaeae426c5303ded677ce455ba1acd9d@13.84.180.240:30303" --rpc tells geth to connect to the Ropsten testnet --testnet or makes the blockchain synchronization faster (see for more details); --fast --syncmode="fast" this PR tells geth which nodes to connect to in order to discover the rest of the network --bootnodes=... tells geth to enable the HTTP-RPC server, allowing trufle and other RPC clients to connect to it --rpc We can use the console geth provides to interact with the network. should do the trick, but if it doesn’t, look for the following line in the geth output. geth attach ℹ️ geth output-------------- INFO [11-13|14:45:16] IPC endpoint opened: /Users/pokemon/.rinkeby/geth.ipc And run accordingly. This should drop you right into the console. Geth should be hard at work syncing with the Ropsten chain, which should take anywhere from a few minutes to a few hours, depending on your hardware and network. Here’s how we can check progress. geth attach /Users/pokemon/.rinkeby/geth.ipc ℹ️ geth console--------------- > eth.blockNumber0 returns the number of the most recent block [ ]. It’ll display until you’ve synced up with the network, which we can check with : eth.blockNumber docs 0 eth.syncing ℹ️ geth console--------------- > eth.syncingfalse Bummer. It seems we aren’t connected to any nodes yet. We’ll have to wait to see this in geth’s output before we can continue. ℹ️ geth output-------------- INFO [11-13|15:26:26] Block synchronisation startedINFO [11-13|15:26:28] Imported new block headers count=384 elapsed=951.820ms number=384 hash=d3d5d5…c79cf3 ignored=0 Great! Let’s try the console again: ℹ️ geth console--------------- > eth.blockNumber0> eth.syncing{currentBlock: 775342,highestBlock: 2356143,knownStates: 167957,pulledStates: 162021,startingBlock: 0} Much better. We’ll wait until returns again before we interact with the blockchain. That 0 up there eth.syncing false is ok, don’t worry. Here’s a few other commands to keep you busy: tells us whether the node is actively listening for network connections or not [ ] net.listening docs returns the number of connected peers [ ] net.peerCount docs gives us insight into the peers we’re connected to [ ] admin.peers docs Let’s try deploying our contract to the Ropsten network. We’ll let Truffle do the hard work for us, again. However, Ropsten being a genuine faux network, we’ll need to get some genuine faux Ether for one of our accounts. Let’s head on over to geth and confirm we have 0 Ether first: ℹ️ geth console--------------- > eth.getBalance(eth.accounts[0])0 Yep. I tried using a but it was down when I tried it. The recommended I use , which you need to use, and it worked well for me. Ropsten Faucet Ropsten Gitter MetaMask’s Ether Faucet MetaMask I then used MetaMask to send Ether to my account in geth. First I had to find out its address. ℹ️ geth console--------------- > eth.accounts[0]"0xff7771583ee3944a9ef32cfcb54c0b0d688fa70a" Then I used “Send” inside MetaMask to send funds to this address. The transfer shouldn’t take more than a couple of minutes (you can click the transfer in MetaMask to go check it out on Etherscan). Once it’s confirmed, you should be able to confirm this inside geth: ℹ️ geth console--------------- > eth.getBalance(eth.accounts[0])1836311700000000000 Let’s also use this account address to tell Truffle which account to use to interact with the blockchain. Update your file to look like this: truffle.js ℹ️ truffle.js------------- module.exports = {networks: {development: {host: "localhost",port: 8545,network_id: "*",from: /* YOUR ADDRESS HERE */,gas: 4000000,}}}; Because we’re sticklers, we’re running the tests again, now on Ropsten. ℹ️ shell-------- $ truffle test Using network 'development'. Error encountered, bailing. Network state unknown. Review successful transactions manually.Error: authentication needed: password or unlock Oh, right. So, geth keeps this account locked for your protection. In order to use it, you need to unlock it. Back to geth: let’s keep the account unlocked as long as geth remains open [ ]. docs ℹ️ geth console--------------- > personal.unlockAccount(eth.accounts[0], "password", 0) Great. Let’s try again now. ℹ️ shell-------- $ truffle test Using network 'development'. Contract: Recorder✓ records event (54382ms) 1 passing (54s) It took a lot longer than with Ganache CLI, but the tests passed. Now let’s boot and try to deploy the contract. This time, Ganache CLI is not the target. Ropsten is. truffle console ℹ️ truffle console------------------ truffle(development)> migrate --resetUsing network 'development'. Running migration: 1_initial_migration.jsReplacing Migrations...... 0x2b330d5a4bac42ac3aea135c0f7090502f05e5349a6684c869db9a9591d02bd3 Much better, but this will take a while to finish. Take the time to note something like this on geth’s output. ℹ️ geth output-------------- INFO [11-22|11:05:50] Submitted contract creation fullhash=0xfb92a0da5e5b7d13a155b1c57bb46ffeb672502842ffe744de30be068a4d5b4f contract=0xf7Ec3C971DFA6549e2c0aC4437068e86dC39b25F Neat, right? By the way, you can copy that transaction hash and contract address and go look for them in . It might take a minute for it to show up, but it will. We’re deploying contracts onto a real network now. Remember, you don’t own a server. This is nothing short of awesome. Ropsten Etherscan In the meantime, Truffle keeps going. ℹ️ truffle console------------------ Running migration: 1_initial_migration.jsReplacing Migrations...... 0x2b330d5a4bac42ac3aea135c0f7090502f05e5349a6684c869db9a9591d02bd3Migrations: 0xf1867e8ac0fe8c4dd26157c2e5123b9f5d63e0e0Saving successful migration to network...... 0x3c0364b133a07bed6f34c1e2b733f57cfee65ded088bdd452547bfba5eb3c18cSaving artifacts...Running migration: 2_deploy_contracts.jsDeploying Recorder...... 0x4c86ec2e5da57f734706257a86e7fff929538a68ed7a5265cc628b984613d822Recorder: 0x949d9ac08845f74ec7cd96337920b672fb31c017Saving successful migration to network...... 0x02c04fc250d3077c12eef7e3c580564f03791ee53de2a1dfcc82eb37deba3911Saving artifacts... Sweet. We’re done. See this line? ℹ️ truffle console------------------ Recorder: 0x949d9ac08845f74ec7cd96337920b672fb31c017 Yea, . We’re live on the Ropsten testnet. that’s us Let’s play with our contract. We know it works because it passes the tests, but still. Back to Truffle, so we can record a message and make sure it stays there. ℹ️ truffle console------------------ truffle(development)> recorder = Recorder.at(Recorder.address)truffle(development)> recorder.record("i dont even") This will take a couple of minutes, since we’re on Ropsten now. But then: ℹ️ truffle console------------------ truffle(development)> recorder.Record({},{fromBlock: 0, toBlock: "latest"}).get(function (error,result) {console.log(result.map((x)=>(x.args._message)))})truffle(development)> ['i dont even'] Perfect! Using the Ethereum mainnet Armed with all this knowledge, we can now easily deploy the same contract into the mainnet. For brevity, we’ll skip a few steps like testing, and get right to it. Let’s restart geth and have it connect to the mainnet. ℹ️ shell-------- $ geth --fast --cache=512 We’ll need to wait for geth to sync up. Go get busy elsewhere, this will take some time now. Once returns false again, let’s use truffle to get this deployed. Make sure that whichever account you’re using has funds in it. Real ether. eth.syncing ℹ️ shell-------- $ truffle migrate --reset This will probably not go well at first. There’s two failure modes that you’re likely to run into. There’s this beauty: ℹ️ truffle migrate output------------------------- Running migration: 1_initial_migration.jsDeploying Migrations...... undefinedError encountered, bailing. Network state unknown. Review successful transactions manually.Error: insufficient funds for gas * price + value And this one too: ℹ️ truffle migrate output------------------------- Running migration: 1_initial_migration.jsDeploying Migrations...... undefinedError encountered, bailing. Network state unknown. Review successful transactions manually.Error: exceeds block gas limit So, this is geth telling truffle that your aren’t ideal. I recommend setting to a reasonably high value, like 1000000 (notice above how the contract deployment was using up about ~20K gas), and checking out to figure out how much the value of should be. Here’s what I see now: gas settings gas ETH Gas Station gasPrice So, 10 Gwei gets us a confirmation in 0.53 minutes. That’s pretty good. can helps us turn that into wei. Ethereum Converter So here’s what truffle.config should look like now. ℹ️ truffle.js------------- module.exports = {networks: {development: {host: "localhost",port: 8545,network_id: "*",from: "0x13f53d42fc7cf4f1cf4ca8031a526f6a8528cdfa",gas: 1000000,gasPrice: 10000000000,}}}; This should have you well on your way! Building a web frontend Let’s move on to implementing a web frontend for this contract. Sure — it’s already public and available for anyone to use… kind of. Using isn’t the most user-friendly tool, plus you can’t easily interact with a contract you don’t have the ABI for. So, we’ll need to go the extra mile to make this available to the general public. geth We’ll start by using and connecting it to our local node. What’s web3.js? From : web3.js the README This is the Ethereum compatible which implements the spec. JavaScript API Generic JSON RPC Let’s go back to Ganache CLI, since it’s faster than using a real network. Start it with . Re-adjust your , and re-deploy your contract. Get its address. ganache-cli truffle.js Then get the first account address from the output. ganache-cli ℹ️ ganache-cli output----------------- Available Accounts==================(0) 0xa2dee6cd83d3d9cb6fb2d42899abcbdf04bf344f We can use Truffle to check the balance of this account. To do that, we’ll also use the web3 library, which is conveniently included in truffle. It tells us this account is loaded. ℹ️ truffle console------------------ truffle(development)> account = "0xa2dee6cd83d3d9cb6fb2d42899abcbdf04bf344f"truffle(development)> parseInt(web3.eth.getBalance(account))'99944815499999920000' Great! Let’s double-check that in the browser. and include it on an HTML file with a tag. Open that file in your browser and throw this in the console. Download web3.js ℹ️ browser javascript console----------------------------- > var host = " "> var web3 = new Web3(new Web3.providers.HttpProvider(host))> var account = "0xa2dee6cd83d3d9cb6fb2d42899abcbdf04bf344f"> parseInt(web3.eth.getBalance(account)) var contractABI = JSON.parse('[{"constant":false,"inputs":[{"name":"message","type":"string"}],"name":"record","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_from","type":"address"},{"indexed":false,"name":"_message","type":"string"}],"name":"Record","type":"event"}]');> var contractAddress = "0x2680998ab6aa13fd092636ec974f5e305a8d9051";> var web3 = new Web3(new Web3.providers.HttpProvider(" "));> web3.eth.defaultAccount = "0xa2dee6cd83d3d9cb6fb2d42899abcbdf04bf344f";> var contract = web3.eth.contract(contractABI).at(contractAddress); http://localhost:8545 Alright, we have a hold of a instance now. Let’s try and record something onto it. contract ℹ️ browser javascript console----------------------------- > contract.record("hello from console"); contract.Record({}, {fromBlock: 0, toBlock: "latest"}).get(function (error, results) {console.log(results.map((result) => (result.args._message)));});["hello from console"] It seems to work! We’re now ready to move on. Using MetaMask Notice we’re setting above, and using one of the accounts Ganache CLI created for us. Now, this is fine for development, but when you throw this on the Web, you’d ideally like users to be the ones paying for the transactions. web3.eth.defaultAccount Enter MetaMask. MetaMask is a Chrome extension serving as an in-browser Ethereum wallet. You’ll need it to continue, so go install it . Additionally, to use MetaMask for development, you’ll need to have a local server running, as just opening the HTML file won’t cut it. Do that in any way you’d like. I like using python. ℹ️ shell-------- $ python -m SimpleHTTPServerServing HTTP on 0.0.0.0 port 8000 ... Get rid of the tag and head on over to localhost:8000 on your browser. If you type into the console, you shouldn’t see . If you do, make sure MetaMask is running. web3 undefined Finally, ensure MetaMask is connected to your local node. Let’s try this again, now without setting . Throw this in the console. web3.eth.defaultAccount ℹ️ browser javascript console----------------------------- > var contractABI = JSON.parse('[{"constant":false,"inputs":[{"name":"message","type":"string"}],"name":"record","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_from","type":"address"},{"indexed":false,"name":"_message","type":"string"}],"name":"Record","type":"event"}]');> var contractAddress = "0x2680998ab6aa13fd092636ec974f5e305a8d9051";var web3 = new Web3(web3.currentProvider);var contract = web3.eth.contract(contractABI).at(contractAddress); contract.Record({}, {fromBlock: 0, toBlock: "latest"}).get(function (error, results) {console.log(results.map((result) => (result.args._message)));});["hello from console"] It works as expected. Let’s try and record another message and make sure we can read that one as well. ℹ️ browser javascript console----------------------------- > contract.record("hello again")Uncaught Error: The MetaMask Web3 object does not support synchronous methods like eth_sendTransaction without a callback parameter Uh-oh. This happens because MetaMask is a . This means that it doesn’t store all of the blockchain data, and depends on asking the network for the data it needs every time. light Ethereum client As such, we’ll need to use asynchronous methods to do the same thing we were doing before. Not too complicated, mind you. ℹ️ browser javascript console----------------------------- > contract.record("hello again", (error, result) => (console.log(result))) Once you’ve done this, MetaMask should pop this up. Note that it says your balance is insufficient. That makes sense. Let’s send some funds to this account that MetaMask created for us. First, get a hold of the account address. Now, back to truffle. ℹ️ truffle console------------------ truffle(development)> web3.eth.sendTransaction({from: web3.eth.accounts[0],to: "0x6a7eB27407a50a4eb9d015EA2B0F2e1BcC724461",value: 5000000000000000}) Let’s try the same command again now. ℹ️ browser javascript console----------------------------- > contract.record("hello again", (error, result) => (console.log(result))) This time, the popup should have no error messages. Click send. You should be able to see something like this on Ganache CLI. ℹ️ ganache-cli output----------------- eth_sendRawTransaction Transaction: 0xfd78adcb6bd3aa86d6e67e5edc946ca3b53235553d4cc5a409c3566bdafb13f6Gas usage: 25025Block Number: 24Block Time: Wed Nov 22 2017 15:58:27 GMT+0100 (CET) Did it work? Well, let’s check it out! ℹ️ browser javascript console----------------------------- > contract.Record({}, {fromBlock: 0, toBlock: "latest"}).get(function (error, results) {console.log(results.map((result) => (result.args._message)));});["hello from console", "hello again"] That’s 2 messages there. Success! From here on out, you’d switch from Ganache CLI to Ropsten and then the Ethereum mainnet. I’ll spare you this duplication in this post. Final notes There’s a couple of extra things we had to do (aside from, well, building the website) in order to get working as intended. Forever on the Chain In order to have the “Saved messages” list update itself with new entries, we decided to make use of the . This sets up a listener which invokes your callback whenever an event, fitting of whichever criteria you like, lands on the chain. Here’s how we did it. event watch method contract.Record({},{fromBlock: 4491369, toBlock: "latest"}).watch(function (error, result) {// DO THINGS}); Note that up there. Since we’re connecting to mainnet, sweeping all transactions from block 0 would be prohibitively slow. As such, we’re limiting our search to events starting at the block number of the block that the contract was deployed into. You can find that number by using Etherscan, but if you know the transaction the contract was created in. 4491369 web3 can also help you Even though this is pretty straightforward, , so we ended up deploying a light node on an EC2 instance instead. MetaMask wasn’t happy with this The code for this project is . available on GitHub